Handlebars not rendering JSON context data, getting empty template

Question

I am having a strange issue where Handlebars is compiling my template properly, but when passing context data, the resulting fields in the html are blank. I've confirmed that my JSON data is actually a javascript object and not a string. My apologies if this has been answered elsewhere. I saw a lot of answers about the JSON string needing to be an actual object, but as i've stated, is not the case.

Template:

<script type="text/x-handlebars-template" id="items-template">
{{#each downloads}}
<div class="download-item">
    <h3>{{pagetitle}}</h3>
    <p>{{description}}</p>
</div>
{{/each}}
</script>

JS:

var source = $("#items-template").html();
var template = Handlebars.compile( $.trim(source) );
var html = template({
    downloads:[
        {pagetitle:'title', description:'the description'},
        {pagetitle:'title', description:'the description'},
        {pagetitle:'title', description:'the description'}
    ]
});

Result of html (Only One Single Blank Item):

<div class="download-item">
    <h3></h3>
    <p></p>
</div>

Any insight would be greatly appreciated. If i figure it out before someone sees this, i'll be sure to post an update.

Answer 1

You should use this

{{#each downloads}}
<div class="download-item">
    <h3>{{this.pagetitle}}</h3>
    <p>{{this.description}}</p>
</div>
{{/each}}