Binding HTML strings in Ember.JS

Question

I am using a third party indexing service (Swiftype) to search through my database. The returned records contains a property called highlight. This simply adds <em> tags around matching strings.

I then bind this highlight property in Ember.JS Handlebars as such:

<p> Title: {{highlight.title}} </p>

Which results in the following output:

Title: Example <em>matching</em> text

The browse actually displays the <em> tags, instead of formatting them. I.e. Handlebars is not identifying the HTML tags, and simply printing them as a string.

Is there a way around this? Thanks!

Answer 1

Ember escapes html because it could be potentional bad code which can be executed. To avoid that use

Ember.Handlebars.SafeString("<em>MyString</em>");

Here are the docs http://emberjs.com/guides/templates/writing-helpers/

if you've done that you could use {{hightlight.title}} like wished,...

HTH

Answer 2

Handlebars by default escapes html, to prevent escaping, use triple brackets:

<p> Title: {{{highlight.title}}} </p>

See http://handlebarsjs.com/#html-escaping