Question

I have this code:

if (this.template) {
        var template = Handlebars.compile( $(this.template).html() );
        $(this.el).html(template());
    }

with this template:

<script id="tmpl-nav-account" type="text/x-handlebars-template">
{{#this}}
<div class="nav-account">
    topbar
</div>
{{/this}}

However, if run the ‘template()’ function with no params, nothing outputs. Yet, if I pass something in like: “template(‘ben’)”, it outputs the static HTML fine. Anyone got any ideas?

Does template() always have to have something passed into it to render the template?

EDIT:

If I remove the {{#this}} from the template, then it works with no parameters…

Answer 1

The this at the top level of a template is the argument you supply to the compiled template function. So, given this:

var o = { ... };
var t = Handlebars.compile(some_template_text);
t(o);

this will be o at the top level of the template. So, if you say template(), this is undefined inside the template and {{#this}} won’t do anything because undefined is false in a boolean context.

You can see this clearly if you use this template:

<script id="tmpl-nav-account" type="text/x-handlebars-template">
    {{#this}}
        <div class="nav-account">
            {{this.where_is}}
        </div>
    {{/this}}
</script>​

and this JavaScript:

var t = Handlebars.compile($('#tmpl-nav-account').html());
console.log(t());
console.log(t({ where_is: 'pancakes house?' }));​

Demo: http://jsfiddle.net/ambiguous/fS8c9/