本文深入探讨了SAPUI5中JSONModel的数据管理机制，重点阐述了JSONModel作为客户端内存模型的特性，即其无法直接将数据更改持久化回本地JSON文件。教程将通过示例代码演示如何在内存中动态添加数据到JSONModel，并强调若需实现数据持久化，必须依赖后端服务（如OData或REST API）。文章旨在帮助开发者清晰理解JSONModel的适用场景及其与数据持久化之间的关系，从而构建更健壮的SAPUI5应用。
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
employeeFormHeaderText}">
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应用程序至关重要。
以上就是SAPUI5 JSONModel 数据管理：理解与实现动态数据操作的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1511088.html
微信扫一扫 
支付宝扫一扫 
