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方法（和Sencha Touch相同）。

 在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"/>
   <Input
      value="{/recipient/name}"
      description="Hello {/recipient/name}"
      valueLiveUpdate="true"
      width="60%"/>
</mvc:View>

 这里 定义一个 input 标签（ sap.m.Input ） ,/recipient/name 标识调用了的数据内容（和上面模型相对应）。

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