如何从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创建一个动态路由列表？

回答

相关问题