带参数的路由不起作用 [英] Routing with parameters does not work

问题描述

我正在关注 教程，但我卡住了关于带参数的路由.

I am following the tutorial here and I got stuck on routing with parameters.

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

The example app did not run on my local use, I therefore change it to make use of local data. However, I get the error "Uncaught Error: Invalid value "Invoices/1" for segment "{invoicePath}"" when I click on an element in the invoices list. It should open up a new Detail page and display the product name and the amount.

这是我的路由清单:

"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.json example data:

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

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

InvoiceList.controller.js. Where I populate the Invoices list and call the view change.

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 段分隔符的斜杠.

The error message is raised by the the router library. The route is defined as detail/{invoicePath} and you pass Invoice/1 as parameter, which is not allowed as the parameter contains the slash which is considered as URL segment separator.

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

However, you mentioned that you could not run the example locally and did some adoptions. The path looks like you are using a JSONModel now. This means you need to adopt several parts in your example as well.

发票列表控制器:

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

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

The binding context should be /Invoices/1 and you want to pass the only the index. Therefore you need to cut off /Invoices/.

细节控制器:

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

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

This will bind your view to /Invoices/1 in the corresponding model.

这篇关于带参数的路由不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！