代码之家 › 专栏 › 技术社区 › Malin

尝试从CSJS在viewscope中设置BS accorbian的状态,但值始终相同(并且不正确)

xpages twitter-bootstrap javascript

Malin · 技术社区 · 6 年前

在我的XPage上,我定义了一个BS手风琴:

<div class="panel-collapse collapse in" id="collapseOne" aria-expanded="true" style="">
</div>

现在我的按钮如下所示:

<xp:button
        value="Label"
        id="button1">
    <xp:eventHandler
        event="onclick"
        submit="true"
        refreshMode="complete">
        <xp:this.script><![CDATA[if ($('#collapseOne').attr('aria-expanded') == "false") {
"#{javascript:viewScope.put('accordian','collapsed')}";
}else{
"#{javascript:viewScope.put('accordian','expanded')}";
}]]></xp:this.script>
    </xp:eventHandler>
</xp:button>

不管手风琴是什么状态,即使脚本识别出手风琴的正确状态,viewScope“accorbian”也被设置为“expanded”。

更新:

我按照建议设置了一个RPC服务,但它不起作用。我做错什么了?

<xe:jsonRpcService
                                id="rpcServiceSetState">
                            <xe:this.methods>
                                <xe:remoteMethod
                                    name="setPanelState"
                                    loaded="true"
                                    script="viewScope.put('accordian', state)">
                                    <xe:this.arguments>
                                        <xe:remoteMethodArg
                                            name="state"
                                            type="string">
                                        </xe:remoteMethodArg>
                                    </xe:this.arguments>
                                </xe:remoteMethod>
                            </xe:this.methods></xe:jsonRpcService>
                            <xp:button id="btnTriggerRPC" value="Trigger RPC Method">
        <xp:eventHandler
            event="onclick"
            submit="true" refreshMode="complete">
            <xp:this.script><![CDATA[if ($('#collapseOne').attr('aria-expanded') == "false") {
    rpcServiceSetState.setPanelState('collapsed')
}else{
    rpcServiceSetState.setPanelState('expanded')
}]]></xp:this.script>
        </xp:eventHandler>
                            </xp:button>

0 回复 | 直到 6 年前

Patrick Kwinten 6 年前

下面的代码允许我通过RPC服务设置viewscope?

<xe:jsonRpcService id="jsonRpcServiceSelected"
        serviceName="rpcService" rendered="true">
        <xe:this.methods>
            <xe:remoteMethod name="setAccordion"
                script="viewScope.put('accordion', selected);">
                <xe:this.arguments>
                    <xe:remoteMethodArg name="selected" type="string" />
                </xe:this.arguments>
            </xe:remoteMethod>

        </xe:this.methods>
    </xe:jsonRpcService>
<xp:button id="btnTriggerRPC" value="Trigger RPC Method">
        <xp:eventHandler
            event="onclick"
            submit="true"
            refreshMode="complete">
            <xp:this.script><![CDATA[if ($('#collapseOne').attr('aria-expanded') == "false") {
rpcService.setAccordion('collapsed');

}else{

    rpcService.setAccordion('expanded');
}]]></xp:this.script>
        </xp:eventHandler>
</xp:button>

Paul Stephen Withers 6 年前

如果您使用浏览器开发工具并查看浏览器上的内容,您将看到问题的根源。SSJS只在服务器上运行,代码的结果被注入CSJS函数并传递给浏览器。CSJS只能在浏览器上运行,不能在服务器上运行。

local\xsp 文件夹并找到您的XPage。“if”语句不能在服务器上运行,只能在 #{javascript:...} .

viewScope.put() 将值设置为“折叠”和“展开”。你同时运行这两个是因为没有“如果”语句 .

https://www.intec.co.uk/understanding-ssjs/ 我相信我已经在我的一个TLCC网络研讨会视频中提到了这一点。您需要通过CSJS将一些内容传递给一个隐藏的输入字段,然后您可以访问SSJS中的隐藏输入并使用它来管理accordion的状态。

基本上,您需要为自定义JavaScript小部件构建自己的状态管理,XPages会自动处理它自己的小部件,如我在这里所述 https://www.intec.co.uk/what-domino-makes-trivial-number-one-state-management/ .