问题描述
我正在开发一个世界范围内的大型应用程序,其中包括从低带宽区域进行访问。因此,我希望对所有复杂的隐藏/当计算使用最少的SSJS或部分刷新。以下是我到目前为止对于一个简单的"隐藏/当":
- 是/否单选按钮,使用CSJS显示面板("是")或隐藏Panel("No")。
- 面板内部有一个Form Table,根据#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脚本将成功隐藏"RadiButtonPanel"。将单选按钮更改为"是"将显示RadiButtonPanel,就像单击"否"将隐藏它一样。效果很好!:-)
一旦文档在读取模式下保存并重新打开,onClientLoad CSJS事件应该读取文档中保存的值,并决定是否显示面板。在编辑模式下打开文档时,onClientLoad将激发,读取单选按钮值,并成功显示或隐藏面板。
到目前为止,我尝试了以下内容,以使其在读取模式下工作:
- 在csjs中,使用"#{javascript:currentDocument.getItemValueString(‘radioButton’}"获取值
- 在"Render"或"Visible"属性中执行某些计算,但这是SSJS,如果隐藏,则会阻止任何"show/hideDiv"CSJS可见性样式更改。
添加一个老式的"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>
这篇关于我们如何才能仅对";Hide/Whens&Quot;使用客户端脚本?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!