My handlebars.js template was working perfectly for a week, but suddenly stopped. I'm puzzled by this issue and would appreciate any insights on why it might have stopped functioning.
Here is 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>
And here is the code that has been in use:
var bannersRawTemplate = $("#banners-template").html();
var bannersTemplate = Handlebars.compile(bannersRawTemplate);
data = '{"banners":[{"type":"banner","width":125}]}';
alert(bannersTemplate(data));
Even though 'type' is not referenced in the template above, I should still see the content inside the "banners" array loop displayed once. However, only a blank space is showing up. It seems like the JSON's 'banners' array is not being recognized.
Any thoughts or suggestions?
Thank you in advance.