SAPUI5 Walkthrough Step 7: JSON Model

https://sapui5.hana.ondemand.com/#/topic/70ef981d350a495b940640801701c409

前面我们已经了解了View视图和Controller控制器，现在我们来学习MVC中的M（Model）模型。

在之前的程序中，我们增加一个Input控件，并把他的value属性、description属性绑定到到同一个模型上。描述将实时刷新

修改控制器controller文件  webapp/controller/App.controller.js

sap.ui.define([
    "sap/ui/core/mvc/Controller",
    "sap/m/MessageToast",
    "sap/ui/model/json/JSONModel"
    ], function(Controller, MessageToast, JSONModel){
        
    return Controller.extend("zdemo_step1.controller.App",{
        onInit: function(){
            var oJsonData = {
                recipient : {
                   name : "World"
                }
             };    
             var oJSONModel = new JSONModel(oJsonData, "jsonModel");
             this.getView().setModel(oJSONModel);
        },
        
        onShowHello: function(){
            MessageToast.show("MessageToast:Hello World ");
        }
    });
});

增加 JSONModel 模块的引用， 

增加onInit方法， 此方法会在控制器加载时被调用（只执行一次）。

  在onInit中，通过this.getView().setModel()，将模型绑定到当前视图上，并指定模型名为 jsonModel。这样视图就能直接使用模型.

 

修改视图view文件 webapp/view/App.view.xml

<mvc:View
    controllerName="zdemo_step1.controller.App"
    xmlns="sap.m"
    xmlns:mvc="sap.ui.core.mvc">
    <Button text="Hello World"
            press=".onShowHello" />
    <Input value="{jsonModel>/recipient/name}"
            description="Hello {jsonModel>/recipient/name}" valueLiveUpdate="true" width="50%" /> </mvc:View>

增加 sap.m.Input 控件，指定value和description的内容都来自模型。valueLiveUpdate为值实时更新

 

执行