Question

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

是/否单选按钮，CSJS显示面板（“是”）或隐藏小组（“否”）。
面板中有一个formTable，根据＃1显示或隐藏值。

在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值并成功显示或隐藏面板。

这是我到目前为止尝试过的，让它在阅读模式下工作：

在CSJS中，使用“＃{javascript：currentDocument.getItemValueString（'radioButton'}”来获取值，
在“呈现”或“可见”属性中进行一些计算，但这是SSJS，如果隐藏，则会阻止任何“show / hideDiv”CSJS可见性样式更改。
添加一个老式的“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>

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

1 个答案: