1. 程式人生 > 其它 >SAPUI5 Walkthrough Step 32: Routing with Parameters

SAPUI5 Walkthrough Step 32: Routing with Parameters

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");
        }
    });
});

執行結果