如何创建来自 JSON 的动态路线列表？

Question

我有一个 JSON 文件，其中包含使用路由器的基于图块的导航应用程序的信息。每个图块都可以是直接指向外部应用程序的 link，或者它可以包含在图块被单击时显示的子图块。其中每一个都可以有自己的副标题，等等。 JSON 最终将由 OData 服务提供，因此应用程序需要动态创建导航，因为它可能会发生变化。

我如何实现路由器使 URL 看起来像 #tile1/tile1-1/tile1-1-3 这表明用户点击了第一个图块，然后转到了他们点击第一个图块的屏幕，然后是他们单击第三个磁贴的另一个屏幕？当来自书签时，该路由将从 JSON.

的 tile1-1-3 节点加载带有子图块的屏幕

名称 'tile1-1-3' 等只是为了帮助可视化此示例中图块的位置。在真实版本中，名称不会指示在树中的位置，它们更像是 #MyApps/MyApprovalApps.

我有一个递归函数，它遍历每个节点并生成一个单独的路由，但我不确定如何添加像 {tile}/{subtile}/{subtile} 这样的动态模式以及我认为的 parent 路由将需要在各个级别之间正确导航。

我有一个 Home.view.xml 用于显示顶级图块，还有一个 Page1.view.xml 用于显示其余级别的子图块。这样对吗？如果没有，我如何动态创建视图？

希望我的目标很明确，如果需要我可以详细说明。

创建路由的递归函数：

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" : []
        }
      ]
    }
  ]
}

Answer 1

如果我理解正确的话，你是在问如何将点击路线表示为字符串，你可以将其作为 URL 的 prt 传递？

参考图块 ID...

我猜你可以将文本作为对象的 JS 数组传递（即将这个 JSON 作为 URL 的一部分）：

a.b.com/xyz?route=[{"tile1-1",{"tile1-1"}},{"tile2",{"tile2-3"} }]

表示他们点击了 tile1 -> tile1-1 -> tile2 -> tile2-3

或者，如果 ID 可能是安全的或其他东西，您可以通过索引号传递它。因为它是一个数组： a.b.com/xyz?route=[{0,{0}},{0,{2}}]

然后评估传递的字符串将其直接转换为 Javascript 对象。或者，如果您担心有人入侵，请编写一个例程来解释它。

（与上面相同的点击）- 这依赖于永远不会改变的图块排列。

Answer 2

这个怎么样？

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

在本例中，您只是按照您的建议使用模式来构建父子关系。

如何创建来自 JSON 的动态路线列表？

How can I create a dynamic list of routes from JSON?

javascript

json

sapui5