SAP OPEN UI5 Step 9: Component Configuration
阿新 • • 發佈:2021-06-22
轉載請聯絡vx:xiaoshitou5854
到目前,是用view替換的content(oView.placeAt("content");),view的定義,和view的例項化不在一個檔案裡;還有一個問題,在App.controller.js裡實例化了Model,並把model設定到了view裡。App.controller.js更應該控制頁面的事件,所以應該把Model相關的程式碼拿出去,比較推薦的做法是,把view的定義和view使用到的model放到一起,也就是元件化。
webapp/Component.js (New)
sap.ui.define([ "sap/ui/core/UIComponent" ], function (UIComponent) { "use strict"; return UIComponent.extend("", { init : function () { // call the init function of the parent UIComponent.prototype.init.apply(this, arguments); } }); });
在init方法裡,要先呼叫父類的init方法
webapp/Component.js
sap.ui.define([ "sap/ui/core/UIComponent", "sap/ui/model/json/JSONModel", "sap/ui/model/resource/ResourceModel" ], function (UIComponent, JSONModel, ResourceModel) { "use strict"; return UIComponent.extend("sap.ui.demo.walkthrough.Component", { metadata : { "rootView": { "viewName": "sap.ui.demo.walkthrough.view.App", "type": "XML", "async": true, "id": "app" } }, init : function () { // call the init function of the parent UIComponent.prototype.init.apply(this, arguments); // set data model var oData = { recipient : { name : "World" } }; var oModel = new JSONModel(oData); this.setModel(oModel); // set i18n model var i18nModel = new ResourceModel({ bundleName: "sap.ui.demo.walkthrough.i18n.i18n" }); this.setModel(i18nModel, "i18n"); } }); });
- 在UIComponent的構造方法裡,使用metadata例項化view,例項化JSONModel,ResourceModel,以前要把Model放到view裡,現在不用了,放到自己的裡面就可以了。雖然沒有放到view裡,但也能從view裡取得出來。
webapp/controller/App.controller.js
sap.ui.define([ "sap/ui/core/mvc/Controller", "sap/m/MessageToast" ], function (Controller, MessageToast) { "use strict"; return Controller.extend("sap.ui.demo.walkthrough.controller.App", { onShowHello : function () { // read msg from i18n model var oBundle = this.getView().getModel("i18n").getResourceBundle(); var sRecipient = this.getView().getModel().getProperty("/recipient/name"); var sMsg = oBundle.getText("helloMsg", [sRecipient]); // show message MessageToast.show(sMsg); } }); });
從controller裡刪除init方法
webapp\index.js
sap.ui.define([
"sap/ui/core/ComponentContainer"
], function (ComponentContainer) {
"use strict";
new ComponentContainer({
name: "sap.ui.demo.walkthrough",
settings : {
id : "walkthrough"
},
async: true
}).placeAt("content");
});
使用ComponentContainer替換view了。
本人微信:xiaoshitou5854