SAPUI5 Walkthrough Step 32: Routing with Parameters
阿新 • • 發佈:2021-08-10
Step 32: Routing with Parameters
帶引數的路由。
(比如我們跳轉到詳情頁時,需要把我們選中的資訊傳過去,這時就需要帶上引數)
修改webapp/manifest.json 檔案, 將Routes中,detai的Pattern更改為:detail/{invoicePath}
修改webapp/view/Detail.view.xml 檔案
<mvc:View xmlns="sap.m" xmlns:mvc="sap.ui.core.mvc" controllerName="sap.ui.demo.walkthrough.controller.Detail"> <Page title="Walkthrough - Details" showNavButton="true" navButtonPress="onNavButtonPress"> <ObjectHeader intro="{invoice>ShipperName}" title="{invoice>ProductName}"/> </Page> </mvc:View>
修改webapp/controller/InvoiceList.controller.js 檔案,
sap.ui.define([ "sap/ui/core/mvc/Controller", "sap/ui/model/json/JSONModel", "../model/formatter", "sap/ui/model/Filter", "sap/ui/model/FilterOperator" ], function(Controller, JSONModel, formatter, Filter, FilterOperator) { "use strict"; return Controller.extend("sap.ui.demo.walkthrough.controller.InvoiceList", { formatter: formatter,
......
, onPress: function(oEvent) { var oItem = oEvent.getSource(); var sPath = window.encodeURIComponent(oItem.getBindingContext("invoice").getPath().substr(1)); var oRouter = this.getOwnerComponent().getRouter(); oRouter.navTo("detail", { invoicePath: sPath }); } }); });
debug時的值如下
修改webapp/controller/Detail.controller.js 檔案, 增加onInit的實現,在頁面載入時,讀取路由中傳過來的引數資訊。
sap.ui.define([ "sap/ui/core/mvc/Controller" ], function(Controller) { "use strict"; return Controller.extend("sap.ui.demo.walkthrough.controller.Detail", { onInit: function () { var oRouter = this.getOwnerComponent().getRouter(); oRouter.getRoute("detail").attachPatternMatched(this._onObjectMatched, this); }, _onObjectMatched: function (oEvent) { this.getView().bindElement({ path: "/" + window.decodeURIComponent(oEvent.getParameter("arguments").invoicePath), model: "invoice" }); }, onNavButtonPress: function(oEvent) { var oRouter = this.getOwnerComponent().getRouter(); oRouter.navTo("overview"); } }); });
執行結果