javascript - 有条件部分刷新

Question

这是上一篇文章的后续内容。我能够将其分解为尽可能简单的案例。 在我正在开发的应用程序中，我想根据 applicationScope 变量的值进行条件部分刷新，该变量在用户打开文档时可能会发生变化。我无法让它工作，因为似乎partialRefresh 目标仅在pageLoad 事件上进行评估，而不是在调用partialRefresh 时动态评估。为了演示这一点，我创建了一个小测试 XPage，它在 True 和 False 之间切换 viewScope 变量，而不进行更新。然后是一个具有partialRefresh公式的按钮，该公式指定是否刷新panelTrue或panelFalse。默认情况下，当文档首次打开时，它会刷新并显示 panelFalse，因为 vsIsTrue 为 null 并解释为 False。如果我将 vsISTrue 切换为 True，然后单击部分刷新按钮，您将看到 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)。单击“切换 View 范围”时，CSJS DOM 元素将使用最新代码重新加载。下次单击按钮并触发部分刷新时，客户端会将正确的 ID 发送到服务器。

编辑:

另一种方法是使用 CSJS 脚本 block 执行相同的操作:

<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>