SAPUI5双视图场景下保存按钮功能实现求助：实现表单修改数据仅点击保存后更新列表视图

这个问题的核心原因是你当前的表单控件直接双向绑定到了原数据模型（usuarios模型），所以任何输入框的修改都会实时同步到模型中，进而立刻反映在列表视图里。要实现“点击保存才更新”的效果，我们需要通过临时副本模型来隔离编辑状态和原始数据，具体步骤如下：

步骤1：在详情页创建临时编辑模型 #

修改Detail.controller.js中的_onObjectMatched方法，当路由匹配到详情页时，从原模型中复制当前用户的数据，创建一个临时的JSON模型用于编辑：

sap.ui.define([
 "sap/ui/core/mvc/Controller",
 "sap/ui/core/routing/History",
 "sap/ui/model/json/JSONModel" // 新增导入JSONModel
], function (Controller, History, JSONModel) {
 "use strict";
 return Controller.extend("sap.ui.demo.walkthrough.controller.Detail", {
 onInit: function() {
 var oRouter = this.getOwnerComponent().getRouter();
 oRouter.getRoute("detail").attachPatternMatched(this._onObjectMatched, this);
 },
 _onObjectMatched: function (oEvent) {
 // 获取当前用户的路径和原始数据
 var sUserPath = window.decodeURIComponent(oEvent.getParameter("arguments").rutaUsuarios);
 var oOriginalUser = this.getView().getModel("usuarios").getObject(sUserPath);
 
 // 创建临时编辑模型，深拷贝原始数据避免引用同步
 var oEditModel = new JSONModel(JSON.parse(JSON.stringify(oOriginalUser)));
 this.getView().setModel(oEditModel, "editUser");
 
 // 保留原模型的绑定上下文，用于后续更新路径
 this.getView().bindElement({
 path: "/" + sUserPath,
 model: "usuarios"
 });
 },
 onNavBack: function () {
 var oHistory = History.getInstance();
 var sPreviousHash = oHistory.getPreviousHash();
 if (sPreviousHash !== undefined) {
 window.history.go(-1);
 } else {
 var oRouter = this.getOwnerComponent().getRouter();
 oRouter.navTo("overview", {}, true);
 }
 },
 onSave: function(){
 // 步骤3的代码写在这里
 }
 });
});

步骤2：修改详情页视图的绑定目标 #

更新Detail.view.xml中的所有输入控件，将绑定从usuarios模型切换到临时的editUser模型，这样编辑的是副本数据：

<mvc:View controllerName="sap.ui.demo.walkthrough.controller.Detail" xmlns="sap.m" xmlns:mvc="sap.ui.core.mvc">
 <Page id="page" title="{i18n>TituloDetalles}" showNavButton="true" navButtonPress=".onNavBack">
 <ObjectHeader title="Introduzca sus nuevos datos, por favor."/>
 <Text text="{i18n>TituloNombre}"/>
 <Input value="{editUser>Nombre}"/> <!-- 修改为editUser模型 -->
 <Text text="{i18n>TituloApellidos}"/>
 <Input value= "{editUser>Apellidos}"/> <!-- 修改为editUser模型 -->
 <ObjectNumber number="{i18n>TituloTelefono}" emphasized="false"/>
 <Input value= "{editUser>Telefono}"/> <!-- 修改为editUser模型 -->
 <Text text="{i18n>TituloCorreo}"/>
 <Input type="Email" value= "{editUser>Correo}"/> <!-- 修改为editUser模型 -->
 <Text text="{i18n>TituloFecha}"/>
 <Input type="Date" value= "{editUser>FechaNacimiento}"/> <!-- 修改为editUser模型 -->
 <Button text="{i18n>BotonGuardar}" press=".onSave"/>
 <Button text="{i18n>BotonCancelar}" press=".onNavBack"/>
 </Page>
</mvc:View>

步骤3：实现保存按钮的同步逻辑 #

完善Detail.controller.js中的onSave方法，将临时模型的编辑数据同步到原usuarios模型，然后返回列表页：

onSave: function(){
 // 获取临时模型的编辑后数据
 var oEditedUser = this.getView().getModel("editUser").getData();
 // 获取原模型和当前用户的绑定路径
 var oUsuariosModel = this.getView().getModel("usuarios");
 var sUserPath = this.getView().getBindingContext("usuarios").getPath();
 
 // 将编辑后的数据更新到原模型
 oUsuariosModel.setProperty(sUserPath, oEditedUser);
 
 // 返回列表视图
 this.onNavBack();
}

原理说明 #

• 我们通过深拷贝原始用户数据创建临时模型，确保编辑操作不会直接影响原模型；
• 只有当用户点击保存按钮时，才将临时模型的最终数据同步到原模型，此时列表视图才会更新；
• 如果用户点击取消按钮直接返回，临时模型会被销毁，原数据不会有任何变化。

这样就完美实现了你需要的“仅点击保存后更新列表”的需求啦！

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