1. SAPUI5 JSONModel 概述
sapui5 中的 sap.ui.model.json.jsonmodel 是一种轻量级的数据模型，主要用于在客户端管理和绑定json格式的数据。它非常适合处理本地数据、模拟数据或从后端服务获取的少量静态数据。jsonmodel 支持双向数据绑定，这意味着ui控件中的更改会自动更新模型数据，反之亦然。
然而，一个核心概念需要明确：JSONModel 是一种内存模型。它在应用程序运行时将JSON数据加载到内存中，所有的数据操作（如添加、修改、删除）都只发生在内存中。JSONModel 不具备将内存中的数据更改写回原始JSON文件（或任何本地文件系统）的能力。这意味着，当用户刷新页面或重新启动应用程序时，所有未通过后端服务持久化的更改都将丢失，数据会恢复到JSON文件初次加载时的状态。
2. JSONModel 的工作原理与数据持久化限制
当在 manifest.json 中配置 JSONModel 并指定 uri 指向一个本地JSON文件时，例如：
"models": {
"employee": {
"type": "sap.ui.model.json.JSONModel",
"uri": "Employees.json"
}
}SAPUI5 应用启动时会加载 Employees.json 文件中的数据到名为 "employee" 的 JSONModel 实例中。此后，所有对 "employee" 模型的读写操作都仅限于内存中的数据副本。
例如，一个表单用于创建新的员工记录：
EmployeeForm.view.xml
<mvc:View xmlns:core="sap.ui.core"
controllerName="sap.ui.test.controller.EmployeeForm"
xmlns="sap.m"
xmlns:form="sap.ui.layout.form"
xmlns:mvc="sap.ui.core.mvc">
<Page showNavButton="true" navButtonPress=".onNavBack">
<Panel headerText="{i18n>employeeFormHeaderText}">
<form:SimpleForm editable="true" layout="ColumnLayout">
<Label text="First Name"/>
<Input value="{/first_name}" width="200px" />
<Label text="Last Name"/>
<Input value="{/last_name}" width="200px" />
<Label text="Email"/>
<Input value="{/email}" width="200px"/>
<Label text="Gender"/>
<Select width="200px">
<items>
<core:Item text="Male" key="male"></core:Item>
<core:Item text="Female" key="female"></core:Item>
<core:Item text="Other" key="other"></core:Item>
</items>
</Select>
<Label text="IP Address"/>
<Input value="{/ip_address}" width="200px"/>
</form:SimpleForm>
<VBox width="100%" alignItems="Center">
<Button
icon="sap-icon://save"
text="{i18n>employeeFormButtonText}"
press=".onSaveEmployee"></Button>
</VBox>
</Panel>
</Page>
</mvc:View>EmployeeForm.controller.js
sap.ui.define([
"sap/ui/core/mvc/Controller",
"sap/ui/core/routing/History",
"sap/ui/model/json/JSONModel"
], function (Controller, History, JSONModel) {
"use strict";
return Controller.extend("sap.ui.test.controller.EmployeeForm", {
onInit: function () {
// 获取主数据模型（employee模型）以计算新ID
var oEmployeeModel = this.getOwnerComponent().getModel("employee");
var iModelLength = oEmployeeModel.oData.Employees.length + 1;
// 创建一个新的JSONModel实例作为表单的默认模型
// 表单字段绑定到此模型的根路径
var oFormModel = new JSONModel({
id: iModelLength,
first_name: "",
last_name: "",
email: "",
gender: "",
ip_address: "",
status: "work"
});
this.getView().setModel(oFormModel); // 将此模型设置为视图的默认模型
},
onSaveEmployee: function () {
// 获取当前表单模型中的数据（即用户输入的新员工信息）
var oNewItem = this.getView().getModel().oData;
// 获取应用程序的主数据模型（employee模型）
var oEmployeeModel = this.getOwnerComponent().getModel("employee");
// 将新员工数据添加到主模型的 /Employees 数组中
// 此操作仅在内存中生效
var aEmployees = oEmployeeModel.getProperty("/Employees");
if (Array.isArray(aEmployees)) {
aEmployees.push(oNewItem);
oEmployeeModel.setProperty("/Employees", aEmployees);
// 或者更简洁地直接push，然后更新模型
// oEmployeeModel.oData.Employees.push(oNewItem);
// oEmployeeModel.refresh(true); // 通知绑定控件更新
} else {
// 如果 /Employees 路径下不是数组，可能需要初始化
oEmployeeModel.setProperty("/Employees", [oNewItem]);
}
// 此时，虽然数据已成功添加到内存中的 oEmployeeModel，
// 但这些更改不会自动写回 Employees.json 文件。
// 如果需要持久化，必须调用后端服务。
console.log("新员工数据已添加到内存模型:", oEmployeeModel.getData());
// 导航回上一页或显示成功消息
// History.getInstance().getPreviousHash()
// window.history.go(-1);
// MessageToast.show("员工信息已保存（仅内存）");
},
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("RouteMain", {}, true);
}
}
});
});在上述 onSaveEmployee 函数中，oNewItem 成功从表单模型中获取，并通过 push 和 setProperty 方法添加到了 employee 模型（主数据模型）的 /Employees 数组中。如果应用中存在其他视图绑定到 employee 模型的 /Employees 路径（例如一个员工列表），那么这些视图会自动更新，显示新添加的员工数据。
然而，正如前面所述，这些更改只存在于应用程序的当前会话内存中。一旦浏览器标签页关闭、页面刷新或应用程序重新加载，这些新添加的员工数据就会消失，因为它们从未被写入到 Employees.json 文件中。
3. 实现数据持久化的策略
要实现数据的真正持久化（即在应用程序会话结束后数据依然存在），必须依赖后端服务。SAPUI5 通常与以下类型的后端服务集成：
- OData 服务： 这是SAP推荐的RESTful数据服务协议，特别适用于SAP系统。通过 sap.ui.model.odata.v2.ODataModel 或 sap.ui.model.odata.v4.ODataModel，可以执行CRUD（创建、读取、更新、删除）操作，并将数据更改发送到后端数据库。
- RESTful API： 如果后端是基于Node.js、Java Spring Boot、Python Flask/Django等构建的RESTful API，可以使用 jQuery.ajax 或 fetch API 来发送HTTP请求（POST、PUT、DELETE）将数据提交到后端。
实现持久化的基本流程：
- 收集数据： 在前端（如 onSaveEmployee 函数中）收集用户输入的新数据。
- 构建请求： 将收集到的数据封装成后端API所需的格式（通常是JSON）。
- 发送请求： 使用 ODataModel 的 create 方法或 jQuery.ajax/fetch 发送POST请求到后端服务的相应端点。
- 后端处理： 后端服务接收到请求后，将数据写入数据库或文件系统。
- 前端响应： 后端返回成功或失败的响应。前端根据响应更新UI（例如显示成功消息，或者如果失败则显示错误消息）。
示例（使用伪代码表示与后端交互）：
// 在 onSaveEmployee 函数中
onSaveEmployee: function () {
var oNewItem = this.getView().getModel().oData;
var oEmployeeModel = this.getOwnerComponent().getModel("employee");
// 假设 oEmployeeModel 是一个 ODataModel，或者我们通过 AJAX 调用后端
// 方式一：如果 oEmployeeModel 是 ODataModel
// var oODataModel = this.getOwnerComponent().getModel("myODataModel"); // 假设有一个OData模型
// oODataModel.create("/Employees", oNewItem, {
// success: function() {
// MessageToast.show("员工信息已成功保存到后端！");
// // 成功后，刷新前端模型或重新绑定以显示最新数据
// oEmployeeModel.loadData("Employees.json", null, false); // 重新从文件加载（如果仍在使用JSONModel模拟）
// // 或者如果是ODataModel，可以刷新ODataModel
// // oODataModel.refresh(true);
// }.bind(this),
// error: function(oError) {
// MessageBox.error("保存失败：" + oError.responseText);
// }
// });
// 方式二：如果通过 RESTful API 调用
jQuery.ajax({
url: "/api/employees", // 你的后端API地址
type: "POST",
contentType: "application/json",
data: JSON.stringify(oNewItem),
success: function(response) {
MessageToast.show("员工信息已成功保存到后端！");
// 成功后，更新内存中的JSONModel，并可能刷新显示
var aEmployees = oEmployeeModel.getProperty("/Employees");
if (Array.isArray(aEmployees)) {
aEmployees.push(oNewItem); // 假设后端返回了完整的新记录，这里可以替换为后端返回的数据
oEmployeeModel.setProperty("/Employees", aEmployees);
}
// 考虑重置表单
this.getView().getModel().setData({
id: oEmployeeModel.oData.Employees.length + 1, // 重新计算ID
first_name: "", last_name: "", email: "", gender: "", ip_address: "", status: "work"
});
}.bind(this),
error: function(xhr, status, error) {
MessageBox.error("保存失败：" + error);
}
});
}4. 注意事项
-
JSONModel 的定位： JSONModel 最适合用于：
- 本地数据绑定： 例如，UI控件的属性、下拉列表的选项等。
- 模拟数据： 在开发阶段，当后端服务尚未就绪时，用 JSONModel 模拟数据进行前端开发。
- 临时数据存储： 仅在当前会话中使用的临时数据。
- ID 生成： 在客户端生成新记录的ID（如 modelLength）适用于模拟数据。在实际应用中，记录的唯一ID通常由后端数据库生成，并在保存成功后返回给前端。
- 错误处理： 在与后端交互时，务必实现健全的错误处理机制，向用户提供清晰的反馈。
- 数据刷新： 当数据通过后端服务成功持久化后，如果前端页面需要显示这些最新数据，可能需要刷新相关的模型（例如，重新加载OData模型或重新请求REST API数据）。
总结
JSONModel 是SAPUI5中一个强大且易于使用的客户端数据模型，特别适合处理内存中的JSON数据。然而，它不提供数据持久化到文件系统的能力。要实现数据的永久存储，开发者必须集成后端服务，并通过标准协议（如OData或自定义REST API）将数据发送到服务器进行处理。理解这一核心区别对于构建功能完善且数据持久化的SAPUI5应用程序至关重要。
