我们如何只使用客户端脚本"hide/whens"？

Question

我正在开发一个大型的全球应用程序,其中包括从低带宽区域访问.因此,我想在所有复杂的隐藏/计算时使用最少的SSJS或部分刷新.到目前为止,这是一个简单的"隐藏/何时":

1. 是/否单选按钮,CSJS显示面板("是")或隐藏面板("否").
2. 面板中有一个formTable,按照#1显示或隐藏值.

3. 在XPage的onClientLoad中,运行以下代码:

   // "getRadioValue" is a simple script to return the value of a radio button
   var v_value = getRadioValue("#{id:radioButton}");
   v_div = '#{javascript:getClientId("radioButtonPanel")}';
   // show or hide div simply use dojo to change the display of the panel
   if (v_value == 'Yes') {
        showDiv(v_div);
   } else {
        hideDiv(v_div);
   };
   

对于新文档,onClientLoad脚本将成功隐藏"radioButtonPanel".将单选按钮更改为"是"将显示radioButtonPanel,就像单击"否"将隐藏它一样.它很棒!:-)

但是,一旦文档被保存并以读取模式重新打开,onClientLoad CSJS事件应该读取文档中保存的值,并决定是否显示该面板.在编辑模式下打开文档时,onClientLoad将触发,读取radioButton值并成功显示或隐藏面板.

这是我到目前为止尝试过的,让它在读取模式下工作:

1. 在CSJS中,使用"#{javascript:currentDocument.getItemValueString('radioButton'}"来获取值,
2. 在"渲染"或"可见"属性中进行一些计算,但这是SSJS,如果隐藏,则会阻止任何"show/hideDiv"CSJS可见性样式更改.

3. 添加一个老式的"div"来计算样式(这是我以前在XPages之前做的事情),但由于我不能再通过html,我似乎无法获得CSJS的风格计算.理想情况下,我可以这样做:

   <div id="radioButtonPanel" style="<ComputedValue>">
   

   ComputedValue将读取文档的后端值,并决定不添加任何内容或"display:none".

请注意,我不想使用viewScopes,因为这个长形式需要很多其他的hide/when.

有没有办法让这个100%的CSJS？我觉得我非常接近,但我想知道在整个过程中我是否只是缺少一些东西.

Answer 1

首先,我建议计算CSS类,而不是计算样式,只需定义一个hidden应用display:none;规则的类.然后切换可见性就像调用dojo.addClass或dojo.removeClass一样简单.

其次,我看到您正在使用#{id:component}语法来获取单选按钮的客户端ID,但使用SSJS来获取面板的客户端ID.使用id:两者的语法; 这仍然只是一个服务器端优化,但如果有很多这些计算的实例,它会加起来.同样,替换#{javascript:currentDocument.getItemValueString('radioButton'}为#{currentDocument.radioButton}.两者都会返回相同的值,但后者会更快.

最后,pass-thru标签的任何属性(没有名称空间的任何组件,如xp:或xc:)仍然可以计算,但是您需要手动填充表达式,因为编辑器不知道哪些属性对这些属性有效标签,因此不提供图形表达式编辑器.因此,如果评估初始显示的理想方法是将内容包装在div中,结果可能如下所示:

<div class="#{javascript:return (currentDocument.getValue('radioButton') == 'Yes' ? 'visible' : 'hidden');}">
<xp:panel>
...
</xp:panel>
</div>