パラメータを使用したルーティングが機能しない

Question

ここではtutorialに従っており、パラメータ付きのルーティングに取り残されています。

サンプルアプリケーションがローカルで使用されていないため、ローカルデータを使用するように変更しました。しかし、請求書リストの要素をクリックすると、セグメント "{invoicePath}"の "Uncaught Error：Invalid value" Invoices/1 "というエラーが表示されます。新しい詳細ページが開き、製品名と金額が表示されます。例えば、データInvoices.json

"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": [ 
    { 
     "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の答えが正しい。

もう1つの解決策は、PATHをエフェクトすることです。 substrと特別なoffsetが必要です。

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

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

JSONモデルとODataの両方がうまく動作します。