我如何使用Mustache.js或Handlebars.js嵌套迭代器？ [英] How do I use nested iterators with Mustache.js or Handlebars.js?
问题描述
我想使用handlebars.js或mustache.js遍历一系列家族，然后遍历该家族的成员。在两个循环内部，我想显示两者的属性。但是，一旦我进入第二次迭代，没有任何家庭变量可见。
{{＃each families}}
{{#each members}}
< p> {{（这里我想要一个姓氏属性）}}< / p>
< p> {{（这里我想要一个成员名称属性）}}< / p>
{{/ each}}
{{/ each}}
这可能吗？我非常感谢任何帮助！
您可以使用对象列表轻松嵌套部分。使用一个数据结构，其中 families 是一个包含对象 members 的列表，该列表包含任何对象更多列表）：
{
families：[
{
surname ：Jones，
members：[
{given：Jim}，
{given：John}，
{given ：Jill}
]
}，
{
surname：Smith，
members：[
{given ：Steve}，
{given：Sally}
]
}
]
}
您可以填写如下模板：
< UL>
{{#families}}
< li> {{姓氏}}
< ul>
{{#members}}
< li> {{given}}< / li>
{{/ members}}
< / ul>
< / li>
{{/ families}}
< / ul>
jsFiddle目前处于关闭状态，因此以下是完整的JS代码：
<！DOCTYPE html>
< head>
< script src =http://cdnjs.cloudflare.com/ajax/libs/mustache.js/0.3.0/mustache.min.js>< / script>
< script src =http://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.1/jquery.min.js>< / script>
< script>
$（函数（）{
var tpl = $（'＃fam'）。html（），
data = {
families：[
{
surname：Jones，
members：[
{given：Jim}，
{given：John}，
{given：Jill}
]
}，
{
surname：Smith，
members：[
{given：Steve}，
{given：Sally}
]
}
]
}，
html = Mustache.to_html（tpl，data）;
$（＃main）。append（html）;
}）;
< / script>
< / head>
< div id =main>< / div>
< script type =template / textid =fam>
< ul>
{{#families}}
< li> {{姓氏}}
< ul>
{{#members}}
< li> {{given}}< / li>
{{/ members}}
< / ul>
< / li>
{{/ families}}
< / ul>
< / script>
I would like to use handlebars.js or mustache.js to iterate over a list of families, and then iterate over that family's members. Inside of both loops, I want to display properties of both. However, once I get into the second iteration, none of the family variables are visible.
{{#each families}} {{#each members}} <p>{{ ( here I want a family name property ) }}</p> <p>{{ ( here I want a member name property ) }}</p> {{/each}} {{/each}}Is this possible? I'd greatly appreciate any help!
解决方案You can nest sections easily with lists of objects. Use a data structure where
familiesis a list that has an objectmembersthat has a list of any objects (or even more lists)like:{ "families" : [ { "surname": "Jones", "members": [ {"given": "Jim"}, {"given": "John"}, {"given": "Jill"} ] }, { "surname": "Smith", "members": [ {"given": "Steve"}, {"given": "Sally"} ] } ] }You would be able to populate a template like:
<ul> {{#families}} <li>{{surname}} <ul> {{#members}} <li>{{given}}</li> {{/members}} </ul> </li> {{/families}} </ul>jsFiddle is currently down so here's the full working HTML with JS:
<!DOCTYPE html> <head> <script src="http://cdnjs.cloudflare.com/ajax/libs/mustache.js/0.3.0/mustache.min.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script> $(function() { var tpl = $('#fam').html(), data = { "families" : [ { "surname": "Jones", "members": [ {"given": "Jim"}, {"given": "John"}, {"given": "Jill"} ] }, { "surname": "Smith", "members": [ {"given": "Steve"}, {"given": "Sally"} ] } ] }, html = Mustache.to_html(tpl, data); $("#main").append(html); }); </script> </head> <div id="main"></div> <script type="template/text" id="fam"> <ul> {{#families}} <li>{{surname}} <ul> {{#members}} <li>{{given}}</li> {{/members}} </ul> </li> {{/families}} </ul> </script>
这篇关于我如何使用Mustache.js或Handlebars.js嵌套迭代器？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
