Multiple loops fail in Handlebars.js

Question

In my Handlebars template, I am trying to loop over the same data twice, but it fails on the second loop. This is how my template looks:

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

And this is the 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);

However, it does not render anything for the second loop:

First loop:
John Doe
Jane Doe
Second loop:

I created a jsFiddle for this here: http://jsfiddle.net/G83Pk/ and have even logged this in as a bug https://github.com/wycats/handlebars.js/issues/408 . Does anyone know how to fix this or know what the problem is?

Answer 1

As far as I know, the correct way to iterate over an array is through a each block helper

Your template would be written as

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

An updated Fiddle 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>

You need to correct your iterator to use the each block helper. And your context variable is invalid input for the each iterator. The above code is the proper way to do what you want.

Answer 3

Not sure with the comments, but I encountered very strange behavior while having similar kind of scenario in my code.

{{#with xxxxx}}
                               {{#each models}}
                                {{#with attributes}}
                                {{value}}                   ---- Worked here
                                {{/with}}
                                {{/each}}

                                {{#each models}}
                                {{#with attributes}}
                                {{value}}                   ---- Didn't Worked here
                                {{/with}}
                                {{/each}}

{{/with}}

It worked with first loop but didnt worked with second loop. I did all scenarios at the ended with some strange solution. If I add any Html script or comment at the end of {{#each models}} of second loop, then second loop regains its context and display values properly.

So this worked flawlessly.

{{#with xxxxx}}
                               {{#each models}}
                                {{#with attributes}}
                                {{value}}                   ---- Worked here
                                {{/with}}
                                {{/each}}

                                {{#each models}}   {{! Comment added }}
                                {{#with attributes}}
                                {{value}}                   ---- It works now.
                                {{/with}}
                                {{/each}}

{{/with}}