sapui5 中的 jsonmodel 是一种客户端模型，用于在前端应用程序的内存中管理数据。它特别适合处理结构简单、数据量较小且不需要与后端服务器进行复杂交互的场景。jsonmodel 可以从本地 json 文件、字符串或 javascript 对象中加载数据，并支持数据的双向绑定，使得 ui 控件能够实时反映模型数据的变化，反之亦然。
在 manifest.json 文件中，JSONModel 通常这样配置，指向一个本地 JSON 文件作为其初始数据源：
"models": {
"employee": {
"type": "sap.ui.model.json.JSONModel",
"uri": "Employees.json" // 从 Employees.json 文件加载初始数据
}
}这意味着当应用启动时，employee 模型会读取 Employees.json 文件的内容，并将其加载到内存中。
理解 JSONModel 的核心在于其“内存模型”的本质。当 JSONModel 从一个 JSON 文件（例如 Employees.json）加载数据时，它仅仅是将该文件的内容读取到应用程序的内存中，形成一个数据副本。此后，所有对 JSONModel 数据的操作（如通过 setProperty 方法或双向绑定引起的修改）都只发生在内存中的这个数据副本上。
关键特性：
让我们分析提供的代码片段，以更好地理解 JSONModel 的工作方式。
3.1 视图 (EmployeeForm.view.xml)
视图定义了一个表单，其中的输入字段通过数据绑定指向一个模型：
<Input value="{/first_name}" width="200px" />
<Input value="{/last_name}" width="200px" />
<!-- ... 其他字段 ... -->这里的 {/first_name} 等绑定表达式，默认绑定到当前视图设置的默认模型。
3.2 控制器 (EmployeeForm.controller.js)
onInit 方法：
onInit: function () {
var model = this.getOwnerComponent().getModel("employee"); // 获取组件级别的 "employee" 模型
var modelLength = model.oData.Employees.length + 1; // 计算新ID
var oModel = new JSONModel({ // 创建一个新的 JSONModel 实例
id: modelLength,
first_name: "",
last_name: "",
email: "",
gender: "",
ip_address: "",
status: "work"
});
this.getView().setModel(oModel); // 将新创建的 oModel 设置为视图的默认模型
}在 onInit 中，控制器首先获取了 manifest.json 中定义的组件级别的 employee 模型，用于计算新条目的 ID。然后，它创建了一个全新的 JSONModel 实例，并将其设置为了当前视图的默认模型。这意味着表单中的输入字段（如 {/first_name}）现在绑定的是这个新创建的、空的模型实例，而不是组件级别的 employee 模型。
onSaveEmployee 方法：
onSaveEmployee: function () {
// 获取视图默认模型中的数据（即用户在表单中输入的新数据）
var newItem = this.getView().getModel().oData;
// 获取组件级别的 "employee" 模型（即加载自 Employees.json 的模型）
var oModel = this.getOwnerComponent().getModel("employee");
// 将新条目添加到组件级别的 "employee" 模型的 Employees 数组中
oModel.setProperty("/Employees", oModel.getProperty("/Employees").concat(newItem));
// 此时，组件级别的 "employee" 模型在内存中已经被更新
}onSaveEmployee 方法的逻辑是正确的，它成功地将用户通过表单输入的新数据（从视图的默认模型中获取）添加到了组件级别的 employee 模型的 /Employees 路径下。这意味着，在当前应用程序的运行周期内，组件的 employee 模型确实包含了新添加的条目。如果此时有一个列表或其他 UI 元素绑定到 employee 模型的 /Employees 路径，它将立即显示新添加的数据。
为什么数据没有“保存”到文件？
问题在于，oModel.setProperty() 仅仅修改了内存中的 JavaScript 对象。JSONModel 并没有内置的机制来监听这些内存变化，并将它们自动同步回其初始加载来源（即 Employees.json 文件）。文件系统操作（如写入文件）通常需要后端服务器的支持，或者在客户端使用更高级的浏览器 API（如 File System Access API 或 IndexedDB）配合用户授权才能实现。
如果应用程序需要将用户输入的数据持久化，即在刷新后依然存在，那么必须将数据发送到后端服务器进行存储。SAPUI5 提供了多种方式来实现这一点：
使用 ODataModel： ODataModel 是 SAPUI5 中用于与 OData 服务交互的专用模型。OData 协议支持数据的增、删、改、查（CRUD）操作。通过 ODataModel，开发者可以直接调用 create、update、remove 等方法，将数据变更提交到后端 OData 服务，由后端负责数据的持久化。这是 SAPUI5 应用中最常见的持久化方式。
// 示例：使用 ODataModel 创建新实体
var oODataModel = this.getOwnerComponent().getModel("yourODataModelName");
var oNewEmployeeData = {
FirstName: newItem.first_name,
LastName: newItem.last_name,
// ... 其他字段
};
oODataModel.create("/Employees", oNewEmployeeData, {
success: function(oData, oResponse) {
sap.m.MessageToast.show("员工信息已成功保存到后端！");
// 可以在此处刷新相关列表或导航
},
error: function(oError) {
sap.m.MessageToast.show("保存失败：" + oError.message);
}
});自定义 AJAX 请求： 对于非 OData 的 RESTful API，可以使用 sap.ui.core.Fetch (或 jQuery.ajax) 发送 HTTP 请求（POST/PUT）将数据提交到后端服务器。
// 示例：使用 Fetch API 发送 POST 请求
fetch('/api/employees', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(newItem)
})
.then(response => response.json())
.then(data => {
sap.m.MessageToast.show("员工信息已成功保存到后端！");
// 可以在此处刷新相关列表或导航
})
.catch(error => {
sap.m.MessageToast.show("保存失败：" + error);
});客户端本地存储： 对于仅需在客户端持久化数据（例如用户偏好设置、离线数据缓存等），可以使用浏览器提供的 localStorage 或 IndexedDB。但这仅限于当前浏览器，数据不会同步到服务器。
SAPUI5 中的 JSONModel 是一个强大且易于使用的客户端数据模型，特别适用于管理内存中的临时数据和实现简单的 UI 绑定。然而，它不具备将数据变更自动回写到文件系统的能力。要实现数据的持久化，开发者需要利用 ODataModel 或自定义 AJAX 请求将数据发送到后端服务器进行存储。正确理解 JSONModel 的这一核心特性，是构建健壮且符合业务需求的 SAPUI5 应用程序的关键一步。
以上就是SAPUI5 JSONModel：数据操作与非持久化特性解析的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
564
收藏
