Question

我在这里关注tutorial，我在参数路由方面陷入困境。

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

这是我的路由清单：

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

});

Answer 1

路由器库引发错误消息。路由定义为detail/{invoicePath}并且您将Invoice/1作为参数传递，这是不允许的，因为参数包含被视为URL段分隔符的斜杠。

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

InvoiceList控制器：

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。

Answer 2

@matbtt的回答是对的。

另一个解决方案是跳过PATH。 substr是必需的。

offset

encodeURIComponent(oItem.getBindingContext("invoice").getPath())

JSON Model和OData都能正常运行。

使用参数进行路由不起作用

2 个答案: