Handlebars.js 中的多个循环失败答案

【问题标题】：Multiple loops fail in Handlebars.jsHandlebars.js 中的多个循环失败
【发布时间】：2013-01-11 10:51:02
【问题描述】：

在我的 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/，甚至将其作为错误 https://github.com/wycats/handlebars.js/issues/408 登录。有谁知道如何解决这个问题或知道问题出在哪里？

【问题讨论】：

标签： javascript handlebars.js template-engine

【解决方案1】：

据我所知，遍历数组的正确方法是通过each block helper

你的模板可以写成

<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>

更新的 Fiddle http://jsfiddle.net/nikoshr/G83Pk/1/

【讨论】：

【解决方案2】：

<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>

您需要更正您的迭代器以使用 each 块助手。并且您的上下文变量对于每个迭代器都是无效的输入。上面的代码是做你想做的事情的正确方法。

【讨论】：

【解决方案3】：

不确定 cmets，但我在代码中遇到类似情况时遇到了非常奇怪的行为。

{{#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}}

【讨论】：