SAPUI5 Walkthrough Step 32: Routing with Parameters

 
 带参数的路由。
(比如我们跳转到详情页时,需要把我们选中的信息传过去,这时就需要带上参数)
 
 修改 webapp/manifest.json 文件,  将Routes中,detai的Pattern更改为:detail/{invoicePath}
SAPUI5 Walkthrough Step 32: Routing with Parameters

 

 

修改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时的值如下

SAPUI5 Walkthrough Step 32: Routing with Parameters

 

 

 

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

SAPUI5 Walkthrough Step 32: Routing with Parameters

 

 

 

执行结果

SAPUI5 Walkthrough Step 32: Routing with Parameters

 

 

 

 

 

 

 

 

 

 

 

 

SAPUI5 Walkthrough Step 32: Routing with Parameters

上一篇:获取网络设备返回值


下一篇:FileReader读取txt文件