Question

I have an interesting problem. Ive had a handlebars.js template thats been working for a week and just stopped. I was hoping someone might have an idea as to why.

Heres the template

    <script id="banners-template" type="text/x-handlebars-template">
   <div class="banner-container" >
   {{#banners}}
   <ul class="banner" >
   <li><div class="checkbox"></div></li>
   <li>{{publisher_status}}</li>
   <li><a href="{{url}}">Test Link</a></li>
   <li><img class="banner" src="{{imageurl}}"/></li>
   <li>{{description}}</li>
   <li>{{width}}x{{height}}</li>
   </ul>
   {{/banners}}
   </div>
   </script>

Heres the code that works with this.

    var bannersRawTemplate   = $("#banners-template").html();
    var bannersTemplate = Handlebars.compile(bannersRawTemplate);
    data = '{"banners":[{"type":"banner","width":125}]}';
    alert(bannersTemplate(data));

I realize that type is not accessed in the template above but it shouldnt matter. I should still get the code inside of the “banners” array loop displayed once. This is not the case. The only part of the template that displays is . Its like its not seeing the banners array inside the JSON.

Any ideas?

Thanks in advance.

Answer 1

Is there a particular reason you don’t pass in the actual JSON, and instead pass a string? From my experience with Mustache, and a cursory review of the Handlebars.js documentation, you should be passing:

JSON.parse('{"banners":[{"type":"banner","width":125}]}');

And, assuming the code you’ve shown is “really real”, why not just:

{"banners":[{"type":"banner","width":125}]}

This is, of course, assuming that the issue really isn’t that you’ve got a list with just one element.