Javascript MustacheJS，如何创建具有未知子列表数的递归列表？

我已经在几个线程中讨论过这一点，看起来这是（或是）实现这一点的方法。但我似乎没法让它发挥作用。所以我肯定错过了什么

输出应类似于

<ul>
  <li>parent
     <ul> 
       <li>
          sub child
          <ul>
            <li> sub sub child</li>
          </ul>
       </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>

小提琴

<ul>
  <li>parent
     <ul> 
       <li>
          sub child
          <ul>
            <li> sub sub child</li>
          </ul>
       </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>

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

那么，我必须为每个级别创建一个模板吗？我错过了什么 只获取第一个子级别，而不获取第二个子级别？还是说留胡子就不可能了

---

您缺少的是这种类型菜单的呈现必须是递归的。因此，您需要在模板本身中引用模板。幸运的是，Mustach通过

partials

结构具有这种功能。所以你可以写以下内容：

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

注意额外的

“菜单”：null

行。这将导致Mustach在看到此情况时终止递归

---

我已经更新了这些更改：。

谢谢您的回复。。我会仔细看一下，看看能不能让它发挥作用。好吧，这似乎对这个场景有效。但我注意到的一件事是，如果我想添加多个项，即：

子项A

，我还必须向该对象添加

“菜单”：null

。。请参见此处->不幸的是，这正是Mustache规范的工作原理：。

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