Handlebars.js中的多個循環失敗

Question

在我的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登錄。 有人知道如何解決此問題，還是知道問題出在哪里？

Answer 1

據我所知，迭代數組的正確方法是通過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>

更新的小提琴http://jsfiddle.net/nikoshr/G83Pk/1/

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

您需要更正迭代器才能使用每個塊幫助器。 而且您的上下文變量對於每個迭代器都是無效的輸入。 上面的代碼是執行所需操作的正確方法。

Answer 3

不確定注釋，但是在我的代碼中有類似情況時遇到了非常奇怪的行為。

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