Step 32: Routing Back and History

Step 32: Routing Back and History

https://openui5.hana.ondemand.com/topic/8ef57cfd37b44f089f7e3b52d56597eb

添加从详细页面返回一览页面的按钮

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}"
		showNavButton="true"
		navButtonPress=".onNavBack">
		<ObjectHeader
			intro="{invoice>ShipperName}"
			title="{invoice>ProductName}"/>
	</Page>
</mvc:View>

showNavButton="true"：添加返回的按钮
navButtonPress=".onNavBack"：返回按钮被点击后调用的方法。

webapp/controller/Detail.controller.js

sap.ui.define([
	"sap/ui/core/mvc/Controller",
	"sap/ui/core/routing/History"
], function (Controller, History) {
	"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"
			});
		},

		onNavBack: function () {
			var oHistory = History.getInstance();
			var sPreviousHash = oHistory.getPreviousHash();

			if (sPreviousHash !== undefined) {
				window.history.go(-1);
			} else {
				var oRouter = this.getOwnerComponent().getRouter();
				oRouter.navTo("overview", {}, true);
			}
		}

	});
});

• sap/ui/core/routing/History：浏览历史
• History.getInstance()：得到浏览历史对象
• oHistory.getPreviousHash()：得到上一个页面的hash。但是只有在发生过页面迁移，它的返回值才是有效的。当没有发生过页面迁移时（也就是通过URL直接访问的详细页面），直接迁移到overview页面。
• window.history.go(-1)：返回上一个页面
  -oRouter.navTo("overview", {}, true)：迁移到overview页面。
  第三个参数ture：用当前的状态替换原来的。
  第二个参数：以为router overview没有参数，所以这里是空{}
• 我们自定义的返回功能，比浏览器的后退按钮要好一点。即使我们在应用程序之外的另一个页面上，浏览器也会简单地回到历史上的一步

约定：要加一个分支，去处理页面迁移不清楚的场合。这里的例子就加了，当得不到前一个迁移页面时，就直接迁移到overview页面。

vx:xiaoshitou5854