Hanlebars Each Helper Context

Question

I'm trying to use a handlebars each iterator in the following chunk of template code:

<table>
    <tr><th></th><th>Today</th><th>This Month<br>(To Date)</th><th>Last Month</th></tr>
    {{#each Activities}}
        {{examineObject this}} - first -
        <tr><td>{{examineObject this}}</td>
        <td>{{Today}}</td>
        <td>{{ThisMonth}}</td>
        <td>{{LastMonth}}</td></tr>
        {{examineObject this}} - third - 
    {{/each}}
    <tr class='total'><td>Net Change</td>
        <td>{{Totals.Today}}</td>
        <td>{{Totals.ThisMonth}}</td>
        <td>{{Totals.LastMonth}}</td></tr>
</table>

examineObject is a handlebars helper I have written to simply call JSON.stringify() on the variable. I'm doing this to evaluate the context. The helper is simply:

examineObject: function(object){
    return JSON.stringify(object);
}

When I compile and render the template above, something very odd happens. The context of this at both the first and third examineObject call is the individual activity selected by the each iterator. However, the context of this in the second examineObject call (surrounded by html tags) is the context of the entire template - NOT the context of the individual activity selected by the each iterator. Can anyone explain why this would be?

Answer 1

Don't use jQuery's .find() to get your handlebars template because it will be scraping a rendered DOM, which may be different from your written file contents.

Instead, try loading your template file asynchronously

Update:

Or if you have a multitude of templates and don't want to run numerous async requests, you may be interested in precompiling the handlebars templates as demonstrated in "Handling handlebars.js like a pro".