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為值實時更新

執行