XPages局部刷新后页面空白：仅绑定数据源时触发的异常

我来帮你拆解这个问题——这个场景我之前在项目里也碰到过，核心问题就出在绑定Domino数据源时，文件上传操作和局部刷新的生命周期冲突上。结合你提供的代码片段（绑定了dominoDocument主数据源），下面是具体的分析和解决办法：

问题根源 #

当页面绑定了dominoDocument这类数据源时，文件上传操作会让数据源处于半提交的状态。此时如果触发无关区域的局部刷新，XPages的页面生命周期会被打乱：局部刷新试图同步数据源状态，但文件上传的半提交状态会导致数据源上下文丢失，最终页面渲染时无法获取到必要的绑定数据，直接变成空白。

具体解决方案 #

1. 给文件上传区域隔离独立数据源 #

把文件上传组件单独放在一个面板里，配置独立的临时数据源，避免和页面主数据源的状态冲突：

<xp:view xmlns:xp="http://www.ibm.com/xsp/core">
    <!-- 页面主数据源 -->
    <xp:this.data>
        <xp:dominoDocument var="document1" formName="Supplier"></xp:dominoDocument>
    </xp:this.data>

    <!-- 单独隔离文件上传区域，使用独立数据源 -->
    <xp:panel id="fileUploadContainer">
        <xp:this.data>
            <xp:dominoDocument var="tempFileDoc" formName="TempFileUpload" action="createDocument"></xp:dominoDocument>
        </xp:this.data>
        <xp:fileUpload id="fileUpload1" value="#{tempFileDoc.Attachment}"></xp:fileUpload>
        <xp:button value="完成上传" id="uploadBtn">
            <xp:eventHandler event="onclick" submit="true" refreshMode="partial" refreshId="fileUploadContainer">
                <xp:this.action><![CDATA[#{javascript:tempFileDoc.save();}]]></xp:this.action>
            </xp:eventHandler>
        </xp:button>
    </xp:panel>

    <!-- 页面其他局部刷新区域 -->
    <xp:panel id="otherRefreshArea">
        <xp:button value="触发局部刷新" id="refreshBtn">
            <xp:eventHandler event="onclick" submit="true" refreshMode="partial" refreshId="otherRefreshArea"></xp:eventHandler>
        </xp:button>
        <!-- 其他组件 -->
    </xp:panel>
</xp:view>

2. 严格限定局部刷新的目标范围 #

检查所有触发局部刷新的组件，确保refreshId指向的是明确的、独立的面板，绝对不要让局部刷新意外覆盖到包含主数据源的根组件或者文件上传的数据源区域。

3. 避免上传过程中触发其他局部刷新 #

可以通过JavaScript在文件上传时禁用其他刷新按钮，直到上传完成，从交互层面避免冲突：

// 禁用其他刷新按钮
function lockOtherActions() {
    document.getElementById("#{id:refreshBtn}").disabled = true;
}
// 上传完成后恢复
function unlockOtherActions() {
    document.getElementById("#{id:refreshBtn}").disabled = false;
}

然后绑定到上传按钮的事件中：

<xp:button value="完成上传" id="uploadBtn">
    <xp:eventHandler event="onclick" submit="true" refreshMode="partial" refreshId="fileUploadContainer"
        onClientLoad="lockOtherActions()" onComplete="unlockOtherActions()">
        <xp:this.action><![CDATA[#{javascript:tempFileDoc.save();}]]></xp:this.action>
    </xp:eventHandler>
</xp:button>

验证步骤 #

1. 先移除页面的主数据源，测试文件上传和局部刷新是否正常，如果正常，就确认是数据源冲突导致的问题；
2. 按照上述方案修改后，同时进行文件上传和触发其他局部刷新，验证页面是否还会空白。

内容的提问来源于stack exchange，提问作者Yaniv Agam