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

小提琴

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

无论如何,我以为胡子会根据初始模板递归地创建子列表.但似乎我必须创建整个嵌套的HTML结构,以使其为下一级生成HTML.

那么我必须为每个级别做一个模板吗？我错过了什么,我只得到第一个子级别,而不是第二个级别？或者这是不可能的胡子？

Answer 1

你缺少的是这种菜单的渲染必须是递归的.因此,您需要在模板内部引用模板.幸运的是胡子通过partials构造具有这种能力.所以你可以写如下内容:

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

但是因为Mustache将始终在对象图中的节点层次结构中,它总是会找到要呈现的"menu"元素,因此这将导致数据无限循环.因此,需要对数据进行额外更改,如下所示:

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

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

我已经更新了这些变化的小提琴:https://jsfiddle.net/6g7wz5vL/24/.