条件部分刷新

Question

这是之前发布的后续内容.我能够把它分离到尽可能简单的情况.在我正在处理的应用程序中,我希望根据applicationScope变量的值进行条件局部刷新,该变量可能会在用户打开文档时更改.我无法使它工作,因为看起来partialRefresh目标仅在调用partialRefresh时不动态地在pageLoad事件上进行评估.为了证明这一点,我创建了一个小测试XPage,可以在没有更新的情况下切换True和False之间的viewScope变量.然后是一个具有partialRefresh公式的按钮,该公式指定是刷新panelTrue还是panelFalse.默认情况下,首次打开文档时,它会刷新并显示panelFalse,因为vsIsTrue为null并解释为False.如果我将vsISTrue切换为True然后单击Partial刷新按钮,您将看到panelFalse是刷新的面板,而不是panelTrue.我将注释放在部分刷新的公式中,部分刷新公式在每次刷新时执行并返回正确的过程,但它永远不会将面板更改为实际刷新到panelTrue.

所以我想我的问题是 - 有不同的方法可以完成吗？因为我看不出怎么样.我已经包含了下面的源代码 - 请注意我使用了调试工具栏,因此您可能需要删除dbBar引用:

<?xml version="1.0" encoding="UTF-8"?>

    <xp:view xmlns:xp="http://www.ibm.com/xsp/core"
        xmlns:xc="http://www.ibm.com/xsp/custom">
        <xc:ccDebugToolbar defaultCollapsed="false" collapseTo="left"></xc:ccDebugToolbar>
        <xp:br></xp:br>
        <xp:br></xp:br>
        <xp:button id="SetViewScope" value="Toggle View Scope">
            <xp:eventHandler event="onclick" submit="true" refreshMode="norefresh">
                <xp:this.action><![CDATA[#{javascript:(viewScope.get("vsIsTrue")) ? viewScope.put("vsIsTrue",false) : viewScope.put("vsIsTrue",true)}]]></xp:this.action>
            </xp:eventHandler>
        </xp:button>
        <xp:button value="Partial Refresh" id="PartialRefresh">
            <xp:eventHandler event="onclick" submit="true" refreshMode="partial"
                refreshId='#{javascript:if (viewScope.get("vsIsTrue")){
        dBar.info("Refesh panelTrue");
         return "panelTrue";
         break;
    }else {
        dBar.info("Refresh panelFalse");
        return "panelFalse";
        break;
     }}'>
            </xp:eventHandler>
        </xp:button>
        <xp:panel id="panelTrue">
            This is panelTrue - viewScope(vsIsTrue) =
            <xp:text escape="true" id="computedField1" value="#{viewScope.vsIsTrue}"></xp:text>
        </xp:panel>
        <xp:panel id="panelFalse">
            This is panelFalse - viewScope(vsIsTrue;) =
            <xp:text escape="true" id="computedField2" value="#{viewScope.vsIsTrue}"></xp:text>
        </xp:panel>
    </xp:view>

Answer 1

为此,您必须更新客户端中的数据.如果更改按钮的代码,则应解决问题:

<xp:button id="SetViewScope" value="Toggle View Scope">
    <xp:eventHandler event="onclick" submit="true" refreshMode="partial" refreshId="PartialRefresh">
        <xp:this.action>
            <![CDATA[#{javascript:(viewScope.get("vsIsTrue")) ?  viewScope.put("vsIsTrue",false) : viewScope.put("vsIsTrue",true)}]]>
        </xp:this.action>
    </xp:eventHandler>
</xp:button>

如您所见,事件处理程序现在更新ID为PartialRefresh的按钮(refreshMode设置为partial).单击" 切换视图范围"时,将使用最新代码重新加载CSJS DOM元素.下次单击按钮并触发部分刷新时,客户端会将正确的ID发送到服务器.

编辑:

另一种方法是使用CSJS脚本块执行相同的技巧:

<xp:div id="refreshMe">
    <xp:scriptBlock id="scriptBlockRefresh">
        <xp:this.value>
            <![CDATA[
                var idPanelTrue = '#{id:panelTrue}';
                var idPanelFalse = '#{id:panelFalse}';
                var vsIsTrue = #{javascript:viewScope.get('vsIsTrue')};
                XSP.allowSubmit();
                var id = vsIsTrue?idPanelTrue:idPanelFalse;
                XSP.partialRefreshPost(id,{});
            ]]>
        </xp:this.value>
    </xp:scriptBlock>
</xp:div>

您正在刷新CSJS sciptblock,然后更新正确的XPage元素,而不是刷新元素.在这种情况下," 部分刷新"按钮必须如下所示:

<xp:button value="Partial Refresh" id="PartialRefresh">
    <xp:eventHandler event="onclick" submit="true" refreshMode="partial"
        refreshId='refreshMe'>
    </xp:eventHandler>
</xp:button>