Step 31: Routing with Parameters

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