這個章節，幫助我們理解MVC架構中的M?

我們將會在APP中新增一個輸入框，并將輸入的值綁定到model，然后將其作為描述，直接顯示在輸入框的右邊

首先修改App.controllers.js

webapp/controller/App.controller.js

sap.ui.define(["sap/ui/core/mvc/Controller","sap/m/MessageToast","sap/ui/model/json/JSONModel"
], (Controller, MessageToast, JSONModel) => {"use strict";return Controller.extend("ui5.walkthrough.controller.App", {onInit() {// set data model on viewconst oData = {recipient : {name : "World"}};const oModel = new JSONModel(oData);this.getView().setModel(oModel);},onShowHello() {MessageToast.show("Hello World");}});
});

接著去修改App.view.xml

webapp/view/App.view.xml

<mvc:ViewcontrollerName="ui5.walkthrough.controller.App"xmlns="sap.m"xmlns:mvc="sap.ui.core.mvc"><Buttontext="Say Hello"press=".onShowHello"/><Inputvalue="{/recipient/name}"description="Hello {/recipient/name}"valueLiveUpdate="true"width="60%"/>
</mvc:View>

最終實現效果如下