Question

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

如何实现路由器以使URL看起来像#tile1/tile1-1/tile1-1-3，这表示用户点击了第一个磁贴，该磁贴进入了他们点击第一个磁贴的屏幕，然后是另一个屏幕他们点击了第三块瓷砖？当来自书签时，该路线将从JSON中的tile1-1-3节点加载带有子弹的屏幕。

名称＆gt; tile1-1-3＆＃39;等仅用于帮助可视化该示例的图块的位置。在真实版本中，名称不会表示树中的位置，它们更像#MyApps/MyApprovalApps。

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

我有一个显示顶级图块的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

这个怎么样？

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

在这个例子中，您只需使用该模式来建立父子关系，就像您建议的那样。

Answer 2

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

参考图块ID ...

您可以将文本作为JS猜测对象传递（即将此JSON包含在URL中）：

a.b.com/xyz?route = [{ “tile1-1”，{ “tile1-1”}}，{ “tile2”，{ “tile2-3”}}]

意味着他们点击了tile1 - ＆gt; tile1-1 - ＆gt; tile2 - ＆gt; tile2-3

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

然后eval传递的字符串将其直接转换为Javascript对象。或者，如果你关心人们的黑客行为，那就写一个例行程序来解释它。

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

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

2 个答案: