javascript - 部分更新时隐藏？

Question

我想知道是否有办法隐藏面板内的 View ，直到执行部分更新？

基本上，我的自定义控件上的面板内部有一个 View ，并且面板设置为部分更新。部分更新元素/ID 是按钮 4，即我的屏幕截图中的蓝色按钮。单击该按钮后，我想显示下面面板内的 View 。

Answer 1

所以你的意思是，viewPanel 应该隐藏，并且只有在单击按钮后才可见？

在这种情况下，您可能会尝试将 viewPanel 的渲染属性绑定(bind)到 requestScope 变量，您可以通过按钮的代码设置该变量:

a.将scope-var(“showContainer”)预先设置为false，例如通过beforePageLoad事件
b.要隐藏/显示的元素位于另一个面板内 (id="outerContainer")
C。内部面板 (id="innerContainer") 的渲染属性绑定(bind)到作用域变量，因此最初它不会渲染
d.按钮将 var 设置为 true 并在outerContainer 上执行部分刷新 >> id.innerContainer 现已呈现

<xp:view xmlns:xp="http://www.ibm.com/xsp/core">
    <xp:this.beforePageLoad><![CDATA[#{javascript:requestScope.put("showContainer", false)}]]></xp:this.beforePageLoad>
    <xp:button
        value="Do something"
        id="button1">
        <xp:eventHandler
            event="onclick"
            submit="true"
            refreshMode="partial"
            refreshId="outerContainer">
            <xp:this.action><![CDATA[#{javascript:requestScope.put("showContainer", true)}]]></xp:this.action>
        </xp:eventHandler>
    </xp:button>
    <xp:panel id="outerContainer">
        <xp:panel id="innerContainer">
            <xp:this.rendered><![CDATA[#{javascript:requestScope.get("showContainer")}]]></xp:this.rendered>
            <xp:label
                value="something inside the container"
                id="label1">
            </xp:label>
        </xp:panel>
    </xp:panel>
</xp:view>

requestScope 可能不是适合您的用例的对象...

您的按钮代码还可以根据一些附加逻辑设置作用域变量；它在全文搜索时做了类似的事情:只有在有任何命中的情况下才会显示包含结果文档列表的结果面板；如果没有找到任何内容，则会显示(即呈现)相应的消息。