HTML5开发移动web应用——SAPUI5篇(5)

主页 » SAP文库 » Fiori

作者 fareise 2018-03-16    689

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

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


[javascript] view plain copy

  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文件中修改如下:

[html] view plain copy

  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框架结构。


本文原始地址:http://sapdoc.cn/sap/theme/290.html

转载请注明出处来自 SAP文库

上一篇

AA固定资产|概述

下一篇

HTML5开发移动web应用——SAPUI5篇(6)