带参数的路由不起作用

我正在关注tutorial https://openui5.hana.ondemand.com/#docs/guide/2366345a94f64ec1a80f9d9ce50a59ef.html在这里，我陷入了带参数的路由。

该示例应用程序未在我的本地使用中运行，因此我将其更改为使用本地数据。但是，当我单击发票列表中的元素时，出现错误“未捕获错误：段“{invoicePath}”的值“Invoices/1”无效”。它应该打开一个新的详细信息页面并显示产品名称和金额。

这是我的路由清单：

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

Invoices.json 示例数据：

{
  "Invoices": [
    {
      "ProductName": "Pineapple",
      "Quantity": 21,
      "ExtendedPrice": 87.2000,
      "ShipperName": "Fun Inc.",
      "ShippedDate": "2015-04-01T00:00:00",
      "Status": "A"
    }
  ]
}

InvoiceList.controller.js。我在其中填充发票列表并调用视图更改。

sap.ui.define([
    "sap/ui/core/mvc/Controller",
    "sap/ui/model/json/JSONModel",
    "sap/ui/demo/wt/model/formatter",
    "sap/ui/model/Filter",
    "sap/ui/model/FilterOperator"
], function (Controller, JSONModel, formatter, Filter, FilterOperator) {
    "use strict";

    return Controller.extend("sap.ui.demo.wt.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)
            });
        }
    });

});

该错误消息是由路由器库引发的。路线定义为detail/{invoicePath}你通过了Invoice/1作为参数，这是不允许的，因为参数包含被视为 URL 段分隔符的斜杠。

但是，您提到您无法在本地运行该示例并进行了一些采用。该路径看起来您现在正在使用 JSONModel。这意味着您还需要在示例中采用多个部分。

发票列表控制器：

oItem.getBindingContext("invoice").getPath().substr(10)

绑定上下文应该是/Invoices/1并且您想传递唯一的索引。因此你需要切断/Invoices/.

详细控制器：

_onObjectMatched: function (oEvent) {
    this.getView().bindElement({
        path: "/Invoices/"+ oEvent.getParameter("arguments").invoicePath,
        model: "invoice"
    });
}

这会将您的视图绑定到/Invoices/1在相应的模型中。