第32步:路由与参数

最新推荐文章于 2022-06-15 23:41:45 发布

真的是我太天真

最新推荐文章于 2022-06-15 23:41:45 发布

阅读量205

点赞数

分类专栏： SAPUI5

原文链接：https://sapui5.hana.ondemand.com/#/topic/2366345a94f64ec1a80f9d9ce50a59ef

版权

SAPUI5 专栏收录该内容

40 篇文章 5 订阅

订阅专栏

说明

我们现在可以在overview和detail页面之间导航，但是我们在概述中选择的实际项目还没有显示在详细页面上。我们应用程序的一个典型用例是在详细页面上显示所选项目的附加信息。

为了实现这一功能，我们必须将已选中项目的信息传递到详细页面，并在那里显示该项目的详细信息。

预览

在这里插入图片描述

所选的发票细节现在显示在详细信息页面中

代码

您可以在演练-步骤32查看和下载所有文件。

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",
		"async": true
	  },
	  "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，这样我们就可以将所选项目的信息传递到详细页面。强制导航参数用花括号定义。

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>

我们添加了一个控制器，它负责设置视图中行项目的上下文，并将ObjectHeader的一些属性绑定到发票模型的字段。我们可以在这里添加来自invoice对象的更详细的信息，但为了简单起见，我们现在只显示两个字段。

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

与之交互的控件实例可以通过getSource方法访问，该方法可用于所有SAPUI5事件。它将返回在本例中被单击的ObjectListItem。我们将使用它将被点击项目的信息传递到详细页面，以便相同的项目可以显示在那里。

在navTo方法中，我们现在添加一个配置对象，以使用行项目的当前信息填充导航参数invoicePath。这将同时更新URL并导航到细节视图。在详细页面上，我们可以再次访问该上下文信息并显示相应的行项目。

为了标识我们选择的对象，我们通常会使用后端系统中行项目的键，因为它简短而精确。但是，对于发票行项目，我们没有简单的键，而是直接使用绑定路径来保持示例简短和简单。行项目的路径是绑定上下文的一部分，该上下文是SAPUI5的帮助对象，用于管理控件的绑定信息。可以通过在任何绑定的SAPUI5控件上使用模型名称调用getBindingContext方法来访问绑定上下文。我们需要通过调用字符串上的.substr(1)从绑定路径中删除第一个/，因为这是URLs 中的一个特殊字符，是不允许的，我们将在详细页面上再次添加它。

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

我们将拼图拼在一起的最后一块是detail 控制器。它需要在视图上设置我们通过URL参数invoicePath传入的上下文，以便实际显示发票列表中已选择的项目，否则，视图将保持空。

在控制器的onInit方法中，我们获取应用程序路由器的实例，并通过调用我们通过名称访问的路由上的 _attachPatternMatched 方法来附加到detail路由。我们注册了一个内部回调函数onObjectMatched，当路由被命中时，它将被执行，可以通过单击条目，也可以通过调用应用程序的URL来获取详细页面。

在由路由器触发的 _onObjectMatched 方法中，我们接收到一个可以用来访问URL和导航参数的事件。arguments形参将返回一个对象，该对象与路由模式中的导航参数相对应。我们访问在发票列表控制器中设置的invoicePath，并在视图上调用bindElement函数来设置上下文。我们必须再次在路径前面添加根/，因为它在作为URL参数传递路径时被删除了。

bindElement函数为SAPUI5控件创建绑定上下文，并接收配置对象中的模型名称以及item的路径。这将触发我们与发票模型字段连接的UI控件的更新。现在，当您单击发票列表中的一个项目时，应该可以在单独的页面上看到发票的详细信息。

约定

在AppDescriptor中定义路由配置

相关信息
Routing and Navigation
Tutorial: Navigation and Routing
API Reference: sap.m.routing.Router
Samples: sap.m.routing.Router

章节

真的是我太天真

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
第32步:路由与参数

说明我们现在可以在overview和detail页面之间导航，但是我们在概述中选择的实际项目还没有显示在详细页面上。我们应用程序的一个典型用例是在详细页面上显示所选项目的附加信息。为了实现这一功能，我们必须将已选中项目的信息传递到详细页面，并在那里显示该项目的详细信息。预览所选的发票细节现在显示在详细信息页面中代码您可以在演练-步骤32查看和下载所有文件。webapp/manifest.json{ "_version": "1.12.0", … "sap.ui5"
复制链接

扫一扫