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

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

1. sap.ui.define([  
2.    "sap/ui/core/mvc/Controller",  
3.    "sap/m/MessageToast",  
4.    "sap/ui/model/json/JSONModel"], function (Controller, MessageToast, JSONModel) {  
5.    "use strict";  
6.    return Controller.extend("sap.ui.demo.wt.controller.App", {        
7. onInit : function () {  
8.          // set data model on view  
9.          var oData = {  
10.             recipient : {  
11.                name : "World"  
12.             }  
13.          };  
14.          var oModel = new JSONModel(oData);  
15.          this.getView().setModel(oModel);  
16.       },  
17.       onShowHello : function () {  
18.          MessageToast.show("Hello World");  
19.       }  
20.    });  
21. });

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

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

1. <mvc:View  
2.    controllerName="sap.ui.demo.wt.controller.App"  
3.    xmlns="sap.m"  
4.    xmlns:mvc="sap.ui.core.mvc">  
5.    <Button  
6.       text="Say Hello"  
7.       press="onShowHello"/>  
8.    <Input  
9.       value="{/recipient/name}"  
10.       description="Hello {/recipient/name}"  
11.       valueLiveUpdate="true"  
12.       width="60%"/>  
13. </mvc:View>

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

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

本文由职坐标整理发布，更多相关内容，请关注职坐标WEB前端HTML5/CSS3频道！