Handlebars.js: {{ this.url }} not working within <img src="{{ this.url }}">

Question

Handlebars.js won't parse the code if i place it within a / etc. As soon as it is outside, it works fine.

<script id="entry-template" type="text/x-handlebars-template">
    <div class="entry">
        {{#each this}}
        <h1>{{title.rendered}}</h1>
        <div>{{content.rendered}}</div>

        <img src="{{url}}" alt=""/>
        {{/each}}
    </div>
</script>

I expected to get

<img src="http://localhost/image.jpg" alt=""/>

but the output was following:

<img src="{{url}}" alt=""/>

Everything else seems to work. The loop too.

Answer 1

Use

<script id="t" type="text/x-handlebars-template">
    <img class="someClass" src="{{url}}">
</script>

Templates are rarely valid and properly formed HTML so you need to keep the browser from trying to interpret template as HTML. The usual approach is to store the template in a with a non-HTML type:

Or use triple brackets

<img src="{{{your source}}}" alt={{{your alt}}} />

Handlebars HTML-escapes values returned by a {{expression}}. If you don't want Handlebars to escape a value, use the "triple-stash",

{{{ {{{foo}}}

Source: http://handlebarsjs.com/expressions.html

Found via: https://github.com/wycats/handlebars-site/issues/28