Eri*_*Red 36 javascript mustache handlebars.js
我想使用handlebars.js或mustache.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}}
这可能吗？我非常感谢任何帮助!
Sam*_*amo 57
对不起,我在游戏中有点晚了.接受的答案很棒,但我想添加一个我认为也很有用的答案,特别是如果你在简单的行/列数组上进行迭代.
当您使用嵌套的车把路径时,您可以使用它../来引用父模板上下文(有关详细信息,请参阅此处).
所以对于你的例子,你可以这样做:
{{#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>
更新
此解决方案适用于Handlebars.下面的评论解释了为什么它不能用于Mustache.
max*_*tty 48
您可以使用对象列表轻松嵌套节.使用数据结构,其中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>