UI5-文档-4.32-Routing with Parameters

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

为了完成这项工作，我们必须将选择的项目的信息传递到细节页面，并在那里显示该项目的细节。

Preview

The selected invoice details are now shown in the details page

Coding

You can view and download all files at Walkthrough - Step 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",
        "sap/ui/demo/walkthrough/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 = sap.ui.core.UIComponent.getRouterFor(this);
                       oRouter.navTo("detail",{
                               invoicePath: oItem.getBindingContext("invoice").getPath().substr(1)
                       });
               }
        });
});

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

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

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

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

sap.ui.define([
        "sap/ui/core/mvc/Controller"
],function(Controller){
        "use strict";
        returnController.extend("sap.ui.demo.walkthrough.controller.Detail",{
               onInit:function(){
                       var oRouter = sap.ui.core.UIComponent.getRouterFor(this);
                       oRouter.getRoute("detail").attachPatternMatched(this._onObjectMatched,this);
               },
               _onObjectMatched:function(oEvent){
                       this.getView().bindElement({
                               path:"/"+ oEvent.getParameter("arguments").invoicePath,
                               model:"invoice"
                       });
               }
        });
});

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

在控制器的init方法中，我们获取我们的应用程序路由器实例，并通过调用方法attachpatternmatch来附加到详细路由，该方法在我们通过其名称访问的路由上匹配。

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

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

Conventions

　　在AppDescriptor中定义路由配置

Parent topic: Walkthrough

Previous: Step 31:
Routing and Navigation

Next: Step 33:
Routing Back and History

Related Information

Routing and
Navigation

Tutorial:
Navigation and Routing

API Reference: sap.m.routing.Router

Samples: sap.m.routing.Router