SAPUI5 'Save' 具有 2 个视图的按钮表单

Question

早上好，我是 SAPUI5 的新手，我正在尝试做一个简单的练习。我几乎完成了，但我想实现一个保存按钮来保存数据。现在我有一个 Responsive Table，它显示了一些带有姓氏的名字和一些其他信息。当我单击任何项目时，它会转到另一个视图，其中我有一个表单。以这种形式显示数据。但是如果我在那里更改它（不按按钮），信息也会在以前的视图中更改。我还有一个 'Save' 按钮，但我不知道如何实现它，只有当我更改表单的输入值并按下按钮时，它才会保存它并 returns 我到第一个视图，更新了信息。

程序如下所示：

第一个观点：

第二种形式的视图：

所以正如我所说，有没有什么方法可以更改例如第二个视图中的名称，并且只有当我按下 'Save'（Guardar）按钮时它才会在第一个视图中更新？提前谢谢你。

这里是我的 GitHub 中的代码，如果你想下载的话： https://github.com/DarkIceDust/webapp

ListaUsuarios.view.xml（第一个视图）：

<mvc:View
   controllerName="sap.ui.demo.walkthrough.controller.ListaUsuarios"
   xmlns="sap.m"
   xmlns:mvc="sap.ui.core.mvc">
   <Table
      id="listaUsuarios"
      headerText="{i18n>TituloListaUsuarios}"
      class="sapUiResponsiveMargin"
      width="auto"
      items="{usuarios>/Usuarios}" >
      <headerToolbar>
         <Toolbar>
            <Title text="{i18n>TituloListaUsuarios}"/>
            <ToolbarSpacer/>
            <SearchField width="50%" search=".buscarUsuarios"/>
         </Toolbar>
      </headerToolbar>
      <columns>
        <Column
            hAlign="End"
            minScreenWidth="Small"
            demandPopin="true"
            width="4em">
            <Text text="{i18n>TituloNombre}"/>
        </Column>
        <Column
            hAlign="End"
            minScreenWidth="Small"
            demandPopin="true"
            width="4em">
            <Text text="{i18n>TituloApellidos}"/>
        </Column>
        <Column
            hAlign="End"
            minScreenWidth="Small"
            demandPopin="true"
            width="4em">
            <Text text="{i18n>TituloTelefono}"/>
        </Column>
        <Column
            hAlign="End"
            minScreenWidth="Small"
            demandPopin="true"
            width="4em">
            <Text text="{i18n>TituloCorreo}"/>
        </Column>
        <Column
            hAlign="End"
            minScreenWidth="Small"
            demandPopin="true"
            width="4em">
            <Text text="{i18n>TituloFecha}"/>
        </Column>
      </columns>
      <items>
         <ColumnListItem
            type="Navigation"
            press="onPress">
            <cells>
                <ObjectIdentifier title="{usuarios>Nombre}"/>
                <Text text="{usuarios>Apellidos}"/>
                <ObjectNumber number="{usuarios>Telefono}" emphasized="false"/>
                <Text text="{usuarios>Correo}"/>
                <Text text="{usuarios>FechaNacimiento}"/>
            </cells>
         </ColumnListItem>
      </items>
   </Table>
</mvc:View>

ListaUsuarios.controller.js（第一个视图的控制器）：

sap.ui.define([
    "sap/ui/core/mvc/Controller",
    "sap/ui/model/json/JSONModel",
    "sap/ui/model/Filter",
    "sap/ui/model/FilterOperator"
    ], function ( Controller, JSONModel, Filter, FilterOperator ) {
        "use strict";
        return Controller.extend("sap.ui.demo.walkthrough.controller.ListaUsuarios", {
        
        buscarUsuarios : function (oEvent) {

            // Construye el filtro del array
            var aFilter = [];
            var sQuery = oEvent.getParameter("query");
            if (sQuery) {
                aFilter.push(new Filter("Nombre", FilterOperator.Contains, sQuery));
            }

            // Enlace de filtros
            var oList = this.byId("listaUsuarios");
            var oBinding = oList.getBinding("items");
            oBinding.filter(aFilter);
        },
        
        onPress: function (oEvent) {
            var oItem = oEvent.getSource();
            var oRouter = this.getOwnerComponent().getRouter();
            oRouter.navTo("detail", {
                rutaUsuarios: window.encodeURIComponent(oItem.getBindingContext("usuarios").getPath().substr(1))
            });
        }
    });

});

Detail.view.xml（表单所在的第二个视图的 XML）：

<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="{usuarios>Nombre}"/>
                <Text text="{i18n>TituloApellidos}"/>
                <Input
                    value= "{usuarios>Apellidos}"/>
                <ObjectNumber number="{i18n>TituloTelefono}" emphasized="false"/>
                <Input
                    value= "{usuarios>Telefono}"/>
                <Text text="{i18n>TituloCorreo}"/>
                <Input
                    type="Email"
                    value= "{usuarios>Correo}"/>
                <Text text="{i18n>TituloFecha}"/>
                <Input
                    type="Date"
                    value= "{usuarios>FechaNacimiento}"/>
                <Button
                    text="{i18n>BotonGuardar}"
                    press=".onSave"/>
                <Button
                    text="{i18n>BotonCancelar}"
                    press=".onNavBack"/>
    </Page>
</mvc:View>

Detail.controller.js（第二个视图的控制器）：


sap.ui.define([
    "sap/ui/core/mvc/Controller",
    "sap/ui/core/routing/History"
], function (Controller, History) {
    "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) {
            this.getView().bindElement({
                path: "/" + window.decodeURIComponent(oEvent.getParameter("arguments").rutaUsuarios),
                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(){
            
        }
    
    });
});

Answer 1

初始化相关模型。

在您的 XML 视图 (Detail.view.xml) 中使用 newUser 模型：

<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 placeholder="Insert Number"
                       value="{newUser>Nombre}"/>
                <Text text="{i18n>TituloApellidos}"/>
                <Input
                    value= "{newUser>Apellidos}"/>
                <ObjectNumber number="{i18n>TituloTelefono}" emphasized="false"/>
                <Input
                    value= "{newUser>Telefono}"/>
                <Text text="{i18n>TituloCorreo}"/>
                <Input
                    type="Email"
                    value= "{newUser>Correo}"/>
                <Text text="{i18n>TituloFecha}"/>
                <Input
                    type="Date"
                    value= "{newUser>FechaNacimiento}"/>
                <Button
                    text="{i18n>BotonGuardar}"
                    press=".onSave"/>
                <Button
                    text="{i18n>BotonCancelar}"
                    press=".onNavBack"/>
    </Page>
</mvc:View>

在你的Detail.controller.js中：

onSave: function(){
    var newUser = this.getView().getModel("newUser").getProperty("/");
    var users = this.getView().getModel("usuarios").getProperty("/");
    users.push(newUser);
    this.getView().getModel("usuarios").setProperty("/", users);
}

Answer 2

这是对您的问题的另一种看法。

您正在寻找的是脏状态...我认为 JSONModel 没有这种能力。但是你可以自己模拟。

        _onObjectMatched: function (oEvent) {
            this.route = "/" + window.decodeURIComponent(oEvent.getParameter("arguments").rutaUsuarios);
            this.getView().bindElement({
                path: this.route,
                model: "usuarios"
            });
            this.oOldData = JSON.parse(JSON.stringify(this.getView().getModel("usuarios").getProperty(this.route)));
        },
        
        onNavBack: function (oEvent) {
            
            // Check if it's dirty
            if (this.oOldData !== this.getView().getModel("usuarios").getProperty(this.route)) {
                this.getView().getModel("usuarios").setProperty(this.route, this.oOldData);
            }
            
            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(){
            this.oOldData = JSON.parse(JSON.stringify(this.getView().getModel("usuarios").getProperty(this.route)));
            debugger
        }

事实上，如果你想更有礼貌，你可以放一个确认对话框，确认后，还原数据并return返回，否则不要导航。

SAPUI5 'Save' 具有 2 个视图的按钮表单

SAPUI5 'Save' Button Form with 2 views

javascript

xml

button

sapui5