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。

所以我必须为每个级别做一个模板吗？我错过了什么？只获得第一个子级别而不是第二个级别？或者这对Mustache来说是不可能的？

Answer 1

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

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

然而，因为Mustache将始终在对象图中的节点层次结构中，它总是会找到一个＆＃34;菜单＆＃34;要渲染的元素，因此这将导致数据无限循环。因此，需要对数据进行额外更改，如下所示：

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

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

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

Mustache JS，如何创建具有未知数量的子列表的递归列表？

到目前为止我有什么

1 个答案: