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", {       onIn IT  : function () {          // set data model on view           VAR  oData = {             recipient : {                n am e : "World"             }          };          var oModel = new JSONModel(oData);          this.getView().setModel(oModel);       },       onShowHello : function () {          MessageToast.show("Hello World");       }    }); });

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

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

 < ;m vc:view controllername="sap.ui.demo.wt.controller.App"  XM lns="sap.m" x ML ns: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"  PR ess="onShowHello"></button></mvc:view>

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

经过如上的修改，我们就完成了数据模型的引用。以上也就是一个在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>

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

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

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

总结

以上是 为你收集整理的 html5教程-HTML5开发移动web应用――SAP UI5篇(5) 全部内容，希望文章能够帮你解决 html5教程-HTML5开发移动web应用――SAP UI5篇(5) 所遇到的问题。

如果觉得 网站内容还不错， 推荐好友。

查看更多关于html5教程-HTML5开发移动web应用――SAP UI5篇(5)的详细内容...