sap html5,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文件中修改如下：

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

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