尝试 Sven Hasselbach 的部分刷新优化

Question

我用这段代码设置了一个非常简单的小测试页面：

<xp:panel id="panelAll">
        <xp:panel rendered="#{javascript:(viewScope.vsPanelRed) ? true : false;}" style="background-color:rgb(255,0,0)">
            Panel Red
        </xp:panel>
        <xp:panel
            rendered="#{javascript:(viewScope.vsPanelRed) ? false : true;}"
            style="background-color:rgb(0,255,0)">
            Panel Green
        </xp:panel>
    </xp:panel>
    <xp:br></xp:br>

    <xp:panel id="panelMain">
        <xp:button value="Label" id="button1">
            <xp:eventHandler event="onclick" submit="false">
                <xp:this.script>
                    <![CDATA[XSP.partialRefreshPost('#{id:panelAll}',{clearForm: true});]]>
                </xp:this.script>
                <xp:this.action><![CDATA[#{javascript:println( "in Click Button");
if (viewScope.vsPanelRed == true){
    viewScope.vsPanelRed = false;
}else{
    viewScope.vsPanelRed = true;
}
            }]]>
                </xp:this.action>
            </xp:eventHandler>
        </xp:button>

    </xp:panel><!-- panelMain -->

该操作将 viewScope vsPanelRed 从 true 切换为 false，并显示红色面板或绿色面板。如果我在 eventHandler 上使用传统的 refreshMode="partial" refreshId="panelAll" 进行 onclick 面板切换，如果我使用 partialResheshPost 作为博客所说的（我认为我输入正确，部分刷新实际上不会发生切换 vsPanelRed 的操作也不会发生。所以我一定在 ![CDATA] 中有问题，但我不知道为什么。

我错过了什么？

Answer 1

Sven Hasselbach 在其优化的部分刷新中不包含对事件处理程序的支持。我已经扩展了他的解决方案以包括对此的支持 - 请参阅我的博客文章 "XPages: Optimized partial refreshes for event handlers"。

如果您将我的优化版本作为 xp:scriptBlock 包含在您的 XPage 中，那么您需要将您的按钮更改为：

<xp:button value="Label" id="button1">
    <xp:eventHandler id="submitEventHandler" event="onclick" submit="false">
        <xp:this.script>
            <![CDATA[
                XSP.partialRefreshPost(
                    '#{id:panelAll}',
                    {clearForm: true, submitid: '#{id:submitEventHandler}'}
                );
            ]]>
        </xp:this.script>
        <xp:this.action><![CDATA[#{javascript:
            println( "in Click Button");
            if (viewScope.vsPanelRed == true){
                viewScope.vsPanelRed = false;
            }else{
                viewScope.vsPanelRed = true;
            }
        }]]></xp:this.action>
    </xp:eventHandler>
</xp:button>