javascript - Mustache JS，如何创建一个子列表数量未知的递归列表？

Question

我已经在几个线程中看到过这个讨论，看起来这是(或现在)执行此操作的方法。但我似乎无法让它发挥作用。所以我一定遗漏了什么。

输出应该看起来像

<ul>
  <li>parent
     <ul> 
       <li>
          sub child
          <ul>
            <li> sub sub child</li>
          </ul>
       </li>
     </ul>
  </li>
</ul>

我得到的是

<ul>
  <li>parent
     <ul> 
       <li>
          sub child
       </li>
     </ul>
  </li>
</ul>

到目前为止我有什么

---

模板

<script type="text/template" id="template">
    <ul class="parent">
        {{#menu}}
        <li>
         {{item}}
         <ul class="popupmenu">
            {{#menu}}
           <li>{{item}}</li>
           {{/menu}}
        </ul>            
        </li>
        {{/menu}}
    </ul>
</script>

js

var data = {
    menu : [{
        "item" : "parent",
        "menu" : [{
            "item": "sub child",
            "menu": [{
                "item" : "sub sub child"  
            }]
         }]
    }]
};

var template = $("#template").html();

var rendered = Mustache.render(template, data);
$("body").html(rendered);

fiddle

https://jsfiddle.net/6g7wz5vL/22/

无论如何，我认为 mustache 会根据初始模板递归地创建子列表。但似乎我必须创建整个嵌套的 HTML 结构才能让它为下一个级别生成 HTML。

So do I have to do a template for each level? What am I missing that I only get the first sub level and not the second? Or is this just not possible with Mustache?

Answer 1

您缺少的是此类菜单的呈现必须是递归的。所以你需要在模板本身内部引用模板。幸运的是，mustache 通过 partials 构造具有此功能。所以你可以这样写:

var rendered = Mustache.render(template, data, {
    "recurse": "<ul class=\"submenu\">{{#menu}}<li>{{item}}{{>recurse}}{{/menu}}</ul>"
});

但是，由于 Mustache 始终会在对象图中的节点层次结构中向上移动，因此它始终会找到要呈现的“菜单”元素，因此这将导致数据无限循环。因此，需要像这样对您的数据进行额外更改:

var data = {
    menu : [{
        "item" : "parent",
        "menu" : [{
            "item": "sub child",
            "menu": [{
                "item" : "sub sub child",
                "menu": null
            }]
         }]
    }]
};

注意这里额外的 "menu": null 行。这将导致 Mustache 在看到它时终止递归。

我已经用这些更改更新了 fiddle :https://jsfiddle.net/6g7wz5vL/24/ .