我想使用handlebars.js或mustache.js遍历一系列家族，然后遍历该家族的成员。在两个循环内部，我想显示两者的属性。但是，一旦我进入第二次迭代，没有任何家庭变量可见。如何在Mustache.js或Handlebars.js中使用嵌套迭代器？
{{#each families}}
{{#each members}}
<p>{{ (here I want a family name property) }}</p>
<p>{{ (here I want a member name property) }}</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>{{surname}}
<ul>
{{#members}}
<li>{{given}}</li>
{{/members}}
</ul>
</li>
{{/families}}
</ul>
的jsfiddle目前下跌了所以这里的用JS完整的HTML工作：
<!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>
[** Handlebars **]（http://jsfiddle.net/KyleMit/nL32Q/1/）和[** Mustache **]的小提琴（http://jsfiddle.net/KyleMit/e3kMw/1/） – KyleMit 2014-02-05 14:21:46
如果上面的数组也有一个名为“given”的属性，您想要引用会发生什么？ – 2015-02-06 11:56:37
@DominicTobias小胡子只允许你引用当前范围的变量。你可以在每个级别有一个'给定'变量，但不能访问父级变量。 http://jsfiddle.net/9jpnpw7a/1/（把手可能会让你这样做） – maxbeatty 2015-02-06 17:18:22
大答案@maxbeatty。
我只是想添加另一个例子，如果任何人有同样的问题，并不能理解上述解决方案。
首先我有我想拆就每4个元素的一个维数组：
// this is the one dimensional data we have from let's say a mysql query
var array = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', ...];
// think of it as [[], [], [], [], [], ...]
// but instead we'll be adding a dummy object with a dummyKey
// since we need a key to iterate on
var jagged = [];
var size = 4, // this is the size of each block
total = array.length/block; // total count of all blocks
// slice the initial one dimensional array into blocks of 4 elements each
for (var i=0; i < total; i++) {
jagged.push({dummyKey: array.slice(i*size, (i+1)*size)});
}
现在，如果我们通过jagged进入我们的观点，我们可以遍历它这样：
<ul>
{{#jagged}}
<li>
<ul>
{{#dummyKey}}
<li>{{.}}</li>
{{/dummyKey}}
</ul>
</li>
{{/jagged}}
</ul>
如果我们有我们的初始阵列填充对象：
var array = [{key1: 'a',
key2: 'b'},
{key1: 'c',
key2: 'd'},
{key1: 'e',
key2: 'f'},
...
];
然后在我们的项目我们将有：
<ul>
{{#jagged}}
<li>
<ul>
{{#dummyKey}}
<li>{{key1}} - {{key2}}</li>
{{/dummyKey}}
</ul>
</li>
{{/jagged}}
</ul>
对不起，我在这里的游戏有点晚。接受的答案很好，但我想添加一个我认为也很有用的答案，特别是在迭代简单的行/列数组时。
当您使用嵌套车把路径时，可以使用../来引用父模板上下文（see here以获取更多信息）。
因此，对于你的榜样，你可以这样做：
{{#each families}}
{{#each members}}
<p>{{../surname}}</p>
<p>{{given}}</p>
{{/each}}
{{/each}}
这对我来说特别有用，因为我是在网格，我想给每平方对应的行和列的位置的类名。所以，如果rows和columns，只需返回数组，我可以这样做：
<tbody>
{{#each rows}}
<tr>
{{#each columns}}
<td class="{{this}}{{../this}}"></td>
{{/each}}
</tr>
{{/each}}
</tbody>
更新
该解决方案是把手。下面的评论解释了为什么它不能在胡子中使用。
对于数据集如下图所示：
{
rows:
["1A", "1B"],
["2A", "2B"],
["3A", "3B"]
}
以下将mustachejs工作：
<tbody>
{{#rows}}
<tr>
{{#.}}
<td>{{.}}</td>
{{/.}}
</tr>
{{/rows}}
</tbody>
我用胡子寻找同样的问题，并给出了车把的答案，和那些对于胡子需要额外的JS，我知道它是旧的，但我会添加我的工作示例，以防别人需要它。干杯!
JSON：
"experience": [
{
"company": "Company 1",
"position": "Graphic Designer",
"tasks": ["Task 1", "Task 2", "Task 3"]
},
{
"company": "Company 2",
"position": "Graphic Designer",
"tasks": ["Task 1", "Task 2", "Task 3", "Task 4", "Task 5"]
}
]
TEMPLATE：
{{#experience}}
<h2>{{company}}</h2>
<div class="position">{{position}}</div>
<div class="occupazione">Responsabilities</div>
<ul>
{{#tasks}}
<li>{{.}}</li>
{{/tasks}}
</ul>
{{/experience}}
可以还添加数据的一个样品物体您正在送入小胡子/车把？ – gonchuki 2012-02-09 17:02:03