HTML5开发移动web应用――SAP UI5篇(5)

了解掌握了MVC中的V和C，这次我们来学习一下M数据模型这一部分的内容。

首先，修改App.controller.js文件的内容，代码如下：

 sap.ui.define([    "sap/ui/core/mvc/Controller",    "sap/m/MessageToast",    "sap/ui/model/json/JSONModel"], function (Controller, MessageToast, JSONModel) {
        "use strict";
    return Controller.extend("sap.ui.demo.wt.controller.App", {
       onInIT : function () {
          // set data model on view          VAR oData = {
             recipient : {
                name : "World"             }
          }
    ;
              var oModel = new JSONModel(oData);
              this.getView().setModel(oModel);
       }
,       onShowHello : function () {
              MessageToast.show("Hello World");
       }
    }
    );
 }
    );
    

其中，onInit方法相当于构造函数，载入controller后自动调用。以上代码构造了一个Model，通过setModel方法在视图中使用setModel方法（和Senchatouch相同）。

在App.view.js文件中修改如下：

 mvc:view controllername="sap.ui.demo.wt.controller.App" XMlns="sap.m" xMLns:mvc="sap.ui.core.mvc">
    button text="Say Hello" Press="onShowHello">
    /button>
input value="{
/recipient/name}
" description="Hello {
/recipient/name}
    " valueliveupdate="true" width="60%" data-cke-editable="1" contenteditable="false">
    button text="Say Hello" PRess="onShowHello">
    /button>
    /mvc:view>

经过如上的修改，我们就完成了数据模型的引用。以上也就是一个在SAPUI5中完整的MVC框架结构。

了解掌握了MVC中的V和C，这次我们来学习一下M数据模型这一部分的内容。

首先，修改App.controller.js文件的内容，代码如下：

 sap.ui.define([    "sap/ui/core/mvc/Controller",    "sap/m/MessageToast",    "sap/ui/model/json/JSONModel"], function (Controller, MessageToast, JSONModel) {
        "use strict";
    return Controller.extend("sap.ui.demo.wt.controller.App", {
       onInit : function () {
          // set data model on view          var oData = {
             recipient : {
                name : "World"             }
          }
    ;
              var oModel = new JSONModel(oData);
              this.getView().setModel(oModel);
       }
,       onShowHello : function () {
              MessageToast.show("Hello World");
       }
    }
    );
 }
    );
    

其中，onInit方法相当于构造函数，载入controller后自动调用。以上代码构造了一个Model，通过setModel方法在视图中使用setModel方法（和SenchaTouch相同）。

在App.view.js文件中修改如下：

 mvc:view controllername="sap.ui.demo.wt.controller.App" xmlns="sap.m" xmlns:mvc="sap.ui.core.mvc">
    button text="Say Hello" press="onShowHello">
    /button>
input value="{
/recipient/name}
" description="Hello {
/recipient/name}
    " valueliveupdate="true" width="60%" data-cke-editable="1" contenteditable="false">
    button text="Say Hello" press="onShowHello">
    /button>
    /mvc:view>
    

经过如上的修改，我们就完成了数据模型的引用。以上也就是一个在SAPUI5中完整的MVC框架结构。

觉得可用，就经常来吧！ 欢迎评论哦！ html5教程，巧夺天工，精雕玉琢。小宝典献丑了！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！