HTML encode and decode in Backbone

Question

I am working on a Backbone.js app and sending request to my API for JSON data to be show on the front end with Backbone Template.

The returned JSON has some HTML entities within the JSON array, and the HTML is getting printed as text.

Below is my template code:

{{#each this}}
<li>
    <a >&nbsp;</a>
    <section class="ip">
        <p><% {{title}} %></p>
        <h3>
            <time class="timeago" datetime="{{pubDate}}"></time>
            {{type}}
        </h3>
    </section>
</li>
{{/each}}

{{#unless this}}
<p>Der er pt ingen sociale opdateringer om denne artist</p>
{{/unless}}

Please help.

Simon Adcock · Answer 1 · 2014-05-21T11:12:38.080

2

I'm not sure what templating engine you're using, but the syntax looks like Handlebars for the most part, so that's what I'm going to assume.

In order to escape HTML entities in Handlebars, you need to use {{{triple mustaches}}}

For example, you have JSON:

{
    text: "<p>My paragraph</p>"
}

Your template might look like this:

<div>
    {{{text}}}
</div>

And your output:

<div>
    <p>My paragraph</p>
</div>

edited May 21 '14 at 11:12

answered May 21 '14 at 08:07

Simon Adcock

3,554
3
25
41

Isnt it `{{text}}` - 2 brackets instead of 3? – SHT May 21 '14 at 11:26
@SHT I think if you want the HTML contained within the text property to be rendered as HTML, you need to use triple mustaches `{{{text}}}`. Using two brackets will escape the HTML and produce output along the lines of `"<p>My paragraph>/p<"` Unless I'm missing something. http://stackoverflow.com/questions/15807799/node-js-and-handlebars-html-compiled-is-escaped – Simon Adcock May 21 '14 at 11:28
You are absolutely right! Just tried it out and it works perfectly! – SHT May 21 '14 at 11:43
@SHT Ah, that's a relief :) – Simon Adcock May 21 '14 at 11:47

HTML encode and decode in Backbone

1 Answers1