SAPUI5 JSONModel 数据管理：理解与实现动态数据操作

"models": {
     "employee": {
         "type": "sap.ui.model.json.JSONModel",
         "uri": "Employees.json"
     }
}

<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>

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 函数中
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);
        }
    });
}