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

Question

我在这里按照教程进行操作,并且遇到了参数路由问题.

示例应用程序没有在我的本地使用上运行,因此我将其更改为使用本地数据.但是,当我点击发票列表中的元素时,我收到错误"未捕获错误:无效值"发票/ 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相应的模型中.