了解掌握了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框架结构。