javascript - 如何从 JSON 创建动态路由列表？

Question

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

我如何实现路由器，使 URL 看起来像 #tile1/tile1-1/tile1-1-3，这表明用户点击了第一个显示在屏幕上的图 block 他们在哪里点击了第一个图 block ，然后在另一个屏幕上点击了第三个图 block ？当来自书签时，该路由将从 JSON 的 tile1-1-3 节点加载带有子图 block 的屏幕。

名称“tile1-1-3”等仅用于帮助可视化此示例中的图 block 位置。在真实版本中，名称不会指示树中的位置，它们更像是 #MyApps/MyApprovalApps。

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

我有一个 Home.view.xml 用于显示顶级图 block ，还有一个 Page1.view.xml 用于显示其余级别的子图 block 。它是否正确？如果没有，我该如何动态创建 View ？

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

创建路由的递归函数:

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

这个怎么样？

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

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