我想使用车把.js或胡子.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}}
这可能吗?我将非常感谢任何帮助!
我在这里玩得有点晚了。接受的答案很棒,但我想添加一个我认为也有用的答案,特别是如果您正在迭代简单的行/列数组。
使用嵌套车把路径时,可以使用../
引用父模板上下文(有关详细信息,请参阅此处(。
因此,对于您的示例,您可以执行以下操作:
{{#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>
更新
此解决方案适用于车把。下面的评论解释了为什么它在 Mustache 中不起作用。
您可以使用对象列表轻松嵌套部分。使用数据结构,其中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>
很好的答案@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>
对于如下所示的数据集:
{
rows:
["1A", "1B"],
["2A", "2B"],
["3A", "3B"]
}
以下内容将在胡子中工作:
<tbody>
{{#rows}}
<tr>
{{#.}}
<td>{{.}}</td>
{{/.}}
</tr>
{{/rows}}
</tbody>
../
运算符引用父循环变量和索引:
{{#each families}}
{{#each this.members}}
<p>Current member: {{ this.name }} (this = inner loop itterator)</p>
<p>Current family: {{ ../this.title }} (../this = parent loop itterator)</p>
<p>Current member index: {{ @index }}</p>
<p>Current family index: {{ @../index }}</p>
{{/each}}
{{/each}}
我正在使用小胡子寻找同样的问题,并且给出了车把的答案,而胡子的答案需要额外的 JS,我知道它很旧,但我会添加我的工作示例以防万一其他人需要它。干杯!
杰森:
"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"]
}
]
模板:
{{#experience}}
<h2>{{company}}</h2>
<div class="position">{{position}}</div>
<div class="occupazione">Responsabilities</div>
<ul>
{{#tasks}}
<li>{{.}}</li>
{{/tasks}}
</ul>
{{/experience}}