如何從JSON創建一個動態路由列表？

我有包含用於使用所述路由器基於區塊導航應用的信息的JSON文件。每個圖塊可以是直接連接到外部應用程序的鏈接，也可以包含點擊圖塊時顯示的子圖元。這些中的每一個都可能有自己的子類，等等。 JSON最終將由OData服務提供，因此應用需要動態創建導航，因爲它可能會發生變化。如何從JSON創建一個動態路由列表？

我該如何實現路由器的URL看起來像#tile1/tile1-1/tile1-1-3這將表明用戶點擊第一個瓷磚，它進入了他們點擊第一個瓷磚的屏幕，然後是他們點擊的另一個屏幕第三塊瓷磚？當來自書籤時，該路線將使用來自JSON的tile1-1-3節點的子節點加載屏幕。

名稱「tile1-1-3」等只以幫助觀察瓷磚的這個例子中的位置。在真實版本中，名稱不會指示樹中的位置，它們將更像#MyApps/MyApprovalApps。

我有一個遞歸函數，它遍歷每個節點並生成單個路徑，但我不確定如何添加動態模式，如{tile}/{subtile}/{subtile}以及我認爲將需要在各級之間正確導航所需的父路由。

我有一個Home.view.xml它顯示頂級瓷磚和Page1.view.xml其他級別的subtiles。它是否正確？如果不是，我該如何動態創建視圖？

希望我的目標很明確，如果需要，我可以進一步談。

它創建路由

遞歸函數：

createRoutes: function(aData, oRouter){ 
    for(var i=0; i<aData.length; i++){ 
    oRouter.addRoute({name: aData[i].id, 
         pattern: aData[i].title, 
         view: "Page1"}); //parent? 

    if(aData[i].subtiles.length > 0){ // has subtiles   
     this.createRoutes(aData[i].subtiles, oRouter); 
    } 
    } 
}

JSON：

{ 
    "TilesCollection" : [ 
    { 
     "id"  : "tile1", 
     "title" : "tile1", 
     "target" : "#", 
     "subtiles" : [ 
     { 
      "id"  : "tile1-1", 
      "title" : "tile1--1", 
      "target" : "#", 
      "subtiles" : [] 
     } 
     ] 
    }, 
    { 
     "id"  : "tile2", 
     "title" : "tile2", 
     "target" : "#", 
     "subtiles" : [ 
     { 
      "id"  : "tile2-1", 
      "title" : "tile2--1", 
      "target" : "#", 
      "subtiles" : [] 
     }, 
     { 
      "id"  : "tile2-2", 
      "title" : "tile2--2", 
      "target" : "#", 
      "subtiles" : [] 
     }, 
     { 
      "id"  : "tile2-3", 
      "title" : "tile2--3", 
      "target" : "#", 
      "subtiles" : [ 
      { 
       "id"  : "tile2-3-1", 
       "title" : "tile2--3--1", 
       "target" : "#", 
       "subtiles" : [] 
      }, 
      { 
       "id"  : "tile2-3-2", 
       "title" : "tile2--3--2", 
       "target" : "#", 
       "subtiles" : [] 
      } 
      ] 
     } 
     ] 
    }, 
    { 
     "id"  : "tile3", 
     "title" : "tile3", 
     "target" : "#", 
     "subtiles" : [] 
    }, 
    { 
     "id"  : "tile4", 
     "title" : "tile4", 
     "target" : "#", 
     "subtiles" : [ 
     { 
      "id"  : "tile4-1", 
      "title" : "tile4--1", 
      "target" : "#", 
      "subtiles" : [] 
     } 
     ] 
    } 
    ] 
}

來源

2015-04-01 pyro

這個怎麼樣？

createRoutes: function(aData, oRouter, sParentPattern, iViewLevel) { 
    iViewLevel = iViewLevel || 0; 

    for (var i=0; i<aData.length; i++) { 
    var sPattern = sParentPattern ? sParentPattern +"/"+ aData[i].title : aData[i].title; 

    oRouter.addRoute({ 
     name: aData[i].id, 
     pattern: sPattern, 
     view: "Page1", 
     viewLevel : iViewLevel 
    }); 

    if (aData[i].subtiles.length > 0) {   
     this.createRoutes(aData[i].subtiles, oRouter, sPattern, iViewLevel+1); 
    } 
    } 
}

在這個例子中，你只是使用該模式來建立父子關係，就像你所建議的那樣。

來源

2015-04-02 06:40:07 cschuff

我把你的邏輯和應用到我自己的版本，它也設置了父路由，並且它工作得很好。現在，路線只設置在具有子物體的位置（沒有點爲沒有子物體本身的區域設置路線），並且如果它們是子物體，則會設置父路線以及代碼提供的適當模式。非常感謝。爲了讓這個應用程序正常工作還有點工作，但我真的很喜歡這個問題的解決！ – pyro 2015-04-02 08:57:02

很高興幫助:) – cschuff 2015-04-02 08:58:21

如果我正確你問你怎麼能代表日點擊路線爲字符串，whcih你能理解你作爲URL的URL傳遞？

談到並列ID ...

您可以傳遞，因爲我猜對象的JS數組文本（即包括本JSON作爲URL的一部分）：

ABCOM/XYZ ？route = [{「tile1-1」，{「tile1-1」}}，{「tile2」，{「tile2-3」}}]

意思是他們點擊了tile1-> tile1-1-> tile2 - > tile2-3

或者如果ID是潛在的安全什麼的，你可以通過索引傳遞沒有。因爲它是aray： a.b.com/xyz?route=[{0,{0}},{0,{2}}]

然後評估傳遞的字符串，將其直接轉換爲Javascript對象。或者如果你擔心黑客入侵，請寫一個例程來解釋它。

（相同點擊如上） - 這依賴於平鋪排列從未改變雖然。

來源

2015-04-01 09:32:27 user2808054

我實際上想使用UI5的路由器機制來處理URL的形成，這也將告訴查看要顯示哪些圖塊，並且還可以導航回到更高級別的圖塊。 – pyro 2015-04-01 10:29:00

我認爲你需要更多地解釋上下文 - 我不知道UI5是什麼恐懼。或者，如果可能的話也許提供一個JSFiddle。 – user2808054 2015-04-01 13:17:05

如何從JSON創建一個動態路由列表？

回答

相關問題