Step 31: Routing with Parameters

https://openui5.hana.ondemand.com/topic/2366345a94f64ec1a80f9d9ce50a59ef

目前在詳細頁面顯示的是固定的靜態文字，這裡通過傳遞給詳細頁面引數，顯示動態內容。

webapp/manifest.json

{
  "_version": "1.12.0",
  …
  "sap.ui5": {
	…
	"routing": {
	  "config": {
		"routerClass": "sap.m.routing.Router",
		"viewType": "XML",
		"viewPath": "sap.ui.demo.walkthrough.view",
		"controlId": "app",
		"controlAggregation": "pages"
	  },
	  "routes": [
		{
		  "pattern": "",
		  "name": "overview",
		  "target": "overview"
		},
		{
		  "pattern": "detail/{invoicePath}",
		  "name": "detail",
		  "target": "detail"
		}
	  ],
		  "targets": {
		"overview": {
		  "viewID": "overview"
		  "viewName": "Overview"
		},
		"detail": {
		  "viewId": "detail"
		  "viewName": "Detail"
		}
	  }
	}
  }
}
 

invoicePath ：是detail的引數，用大括號是說明這個引數是必須要傳遞的引數。

webapp/view/Detail.view.xml

<mvc:View
	controllerName="sap.ui.demo.walkthrough.controller.Detail"
	xmlns="sap.m"
	xmlns:mvc="sap.ui.core.mvc">
	<Page
		title="{i18n>detailPageTitle}">
		<ObjectHeader
			intro="{invoice>ShipperName}"
			title="{invoice>ProductName}"/>
	</Page>
</mvc:View>
 

加了對應的controller，從invoice model取得動態資料顯示到頁面上。

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", {
		…

		onPress: function (oEvent) {
			var oItem = oEvent.getSource();
			var oRouter = this.getOwnerComponent().getRouter();
			oRouter.navTo("detail", {
				invoicePath: window.encodeURIComponent(oItem.getBindingContext("invoice").getPath().substr(1))
			});
		}
	});
});
 

oEvent.getSource():所以的OpenUI5 events都支援的方法，取得使用者點選的控制元件，這裡得到的是ObjectListItem，就是使用者點選的明細行。
navTo ：加了引數，所以它會更新URL，以命中之前定義的router，命中後顯示詳細頁面。
oItem.getBindingContext("invoice")的返回值是：{oModel: constructor, sPath: '/Invoices/4', bForceRefresh: false, sDeepPath: ''}
oItem.getBindingContext("invoice").getPath()的返回值是：'/Invoices/4'。後面的數字是Invoices.json檔案裡，Invoices數組裡商品的下標，後面的詳細頁面會接收到'/Invoices/4'，然後根據這個下標，去取相應的商品資訊。
oItem.getBindingContext("invoice").getPath().substr(1)：把'/Invoices/4'字串最前面的"/"去掉。在URL裡"/"是非法字元，在這裡去掉後，在後面的詳細頁面，還要手動加上。
window.encodeURIComponent(oItem.getBindingContext("invoice").getPath().substr(1))： 就是把'/Invoices/4'裡的數字加密，最後返回：'Invoices%2F4'。

webapp/controller/Detail.controller.js (New)

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

• oRouter.getRoute("detail").attachPatternMatched(this._onObjectMatched, this);
  這行程式碼是註冊回撥函式，當detail的router命中後（不管是通過URL還是，點選一欄的明細行），呼叫回撥函式_onObjectMatched
• oEvent.getParameter("arguments")：當回撥_onObjectMatched 被觸發後，可以通過oEvent得到傳遞過來的引數的值，此呼叫的返回值是一個object：{invoicePath: 'Invoices%2F4'}
  -window.decodeURIComponent(oEvent.getParameter("arguments").invoicePath)：把'Invoices%2F4'變成'Invoices/4'
  -path: "/" + window.decodeURIComponent(oEvent.getParameter("arguments").invoicePath)：手動把/加回去，最後變成：'/Invoices/4'
• model: "invoice"：給model起個名字，然後在view裡可以使用這個名字，去取得引數裡的值。
• bindElement函式，建立binding context

vx:xiaoshitou5854