Handlebars.js中有多个循环失败
Multiple loops fail in Handlebars.js
在我的Handlebars模板中,我试图对相同的数据进行两次循环,但在第二次循环时失败了。我的模板是这样的:
<div id="placeholder"></div>
<script type="text/x-handlebars" id="people-template">
First loop:<br />
<ul>
{{#.}}
<li>{{name}}</li>
{{/.}}
</ul>
Second loop:<br />
<ul>
{{#.}}
<li>{{name}}</li>
{{/.}}
</ul>
</script>
这就是JavaScript:
var context= [
{ name: "John Doe", location: { city: "Chicago" } },
{ name: "Jane Doe", location: { city: "New York"} }
];
var template = Handlebars.compile($("#people-template").text());
var html = template(context);
$('#placeholder').html(html);
然而,它不会为第二个循环呈现任何内容:
First loop:
John Doe
Jane Doe
Second loop:
我在这里创建了一个jsFiddle:http://jsfiddle.net/G83Pk/甚至已经将其作为bug登录https://github.com/wycats/handlebars.js/issues/408.有人知道如何解决这个问题吗?或者知道问题出在哪里?
据我所知,迭代数组的正确方法是通过each
块助手
你的模板将被写为
<script type="text/x-handlebars" id="people-template">
First loop:<br />
<ul>
{{#each .}}
<li>{{name}}</li>
{{/each}}
</ul>
Second loop:<br />
<ul>
{{#each .}}
<li>{{name}}</li>
{{/each}}
</ul>
</script>
更新的Fiddlehttp://jsfiddle.net/nikoshr/G83Pk/1/
<div id="placeholder"></div>
<script id="people-template" type="text/x-handlebars">
First loop:<br />
<ul>
{{#each context}}
<li>{{name}}</li>
{{/each}}
</ul>
Second loop:<br />
<ul>
{{#each context}}
<li>{{name}}</li>
{{/each}}
</ul>
</script>
<script type="text/javascript">
var template = Handlebars.compile($("#people-template").html());
var json = {
"context": [
{ "name": "John Doe", "location": { "city": "Chicago" } },
{ "name": "Jane Doe", "location": { "city": "New York"} }
]
};
var html = template(json);
$('#placeholder').html(html);
</script>
您需要更正迭代器以使用每个块帮助器。并且您的上下文变量对于每个迭代器都是无效的输入。上面的代码是执行您想要的操作的正确方法。
对注释不确定,但我在代码中遇到类似场景时遇到了非常奇怪的行为。
{{#with xxxxx}}
{{#each models}}
{{#with attributes}}
{{value}} ---- Worked here
{{/with}}
{{/each}}
{{#each models}}
{{#with attributes}}
{{value}} ---- Didn't Worked here
{{/with}}
{{/each}}
{{/with}}
它适用于第一个循环,但不适用于第二个循环。最后,我用一些奇怪的解决方案完成了所有场景。如果我在第二个循环的{{#each-models}}}末尾添加任何Html脚本或注释,那么第二个环路将重新获得其上下文并正确显示值。
所以这是完美的。
{{#with xxxxx}}
{{#each models}}
{{#with attributes}}
{{value}} ---- Worked here
{{/with}}
{{/each}}
{{#each models}} {{! Comment added }}
{{#with attributes}}
{{value}} ---- It works now.
{{/with}}
{{/each}}
{{/with}}
相关文章:
- 在window.print()中加载为循环指令而编译时准备DOM失败
- js角度按钮保持循环失败
- 在for循环中使用setTimeout失败
- 循环遍历所有字段,如果任何一个字段的验证失败jquery,则返回false
- 循环遍历 ArrayController 失败,因为它不是数组,即使控制器具有正确的数据模型也是如此
- 断言失败:#each 循环的值必须是数组余烬 js
- javascript:将键从for循环传递到另一个函数失败
- 循环通过函数会导致错误,并在第一次更改时失败
- 循环使用Ajax的函数.仅在IE中失败.其他浏览器都能正常工作
- 在所有跨度上循环并更新一个失败的whit JQuery
- Javascript正则表达式失败(循环?)
- Javascript和JSON.子数组循环失败
- 我的for循环内输出分叉失败
- Insertbefore()在循环中只添加第一行,在其他行上失败
- jQuery animate()在setTimeout()循环后失败
- Foreach循环javascript失败
- file_put_contents上的循环偶尔会触发“打开流失败”.警告
- Javascript和JQuery UI的while循环失败
- 在javascript中执行for循环失败
- Handlebars.js中有多个循环失败