我们如何才能仅对&quot；Hide/Whens&Quot；使用客户端脚本？ [英] How can we use ONLY client side script for "hide/whens"?

问题描述

我正在开发一个世界范围内的大型应用程序，其中包括从低带宽区域进行访问。因此，我希望对所有复杂的隐藏/当计算使用最少的SSJS或部分刷新。以下是我到目前为止对于一个简单的"隐藏/当"：

1. 是/否单选按钮，使用CSJS显示面板("是")或隐藏 Panel("No")。
2. 面板内部有一个Form Table，根据#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脚本将成功隐藏"RadiButtonPanel"。将单选按钮更改为"是"将显示RadiButtonPanel，就像单击"否"将隐藏它一样。效果很好！：-)

一旦文档在读取模式下保存并重新打开，onClientLoad CSJS事件应该读取文档中保存的值，并决定是否显示面板。在编辑模式下打开文档时，onClientLoad将激发，读取单选按钮值，并成功显示或隐藏面板。

到目前为止，我尝试了以下内容，以使其在读取模式下工作：

1. 在csjs中，使用"#{javascript:currentDocument.getItemValueString(‘radioButton’}"获取值
2. 在"Render"或"Visible"属性中执行某些计算，但这是SSJS，如果隐藏，则会阻止任何"show/hideDiv"CSJS可见性样式更改。

3. 添加一个老式的"div"来计算样式(这是我在XPages出现之前所做的)，但是因为我不能再执行pass-through html，所以似乎无法计算该样式的CSJS。理想情况下，我可以这样做：

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

   ComputedValue将读取文档的后端值，并决定不添加任何内容或"display：None"。

请注意，我不想使用viewScope，因为此长表单的所有其他隐藏/时间都需要许多viewScope。

有没有办法让这个100%的CSJS？我觉得我已经很接近了，但我想知道在整个过程中我是否遗漏了什么。

css

首先，我建议计算推荐答案类，而不是计算样式--只定义一个应用display:none;规则的名为hidden的类。然后，切换可见性就像调用dojo.addClass或dojo.removeClass一样简单。

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

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

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

这篇关于我们如何才能仅对&quot；Hide/Whens&Quot；使用客户端脚本？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！