Show property which includes html tags

Question

I've an ember property which includes html tags (<br />, <strong>, <p>, <span>, and similar stuff).

How can i tell ember not to escape this text? Is there any default Handlebars helper from ember, or need I to write my own?

Answer 1

From http://handlebarsjs.com/

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

{{{expression}}}

Answer 2

Within Ember.js you can do this via the htmlSafe method, which is added to the String prototype, see http://jsfiddle.net/pangratz666/jNAQ6/:

Handlebars:

<script type="text/x-handlebars" >
    {{App.html}} - {{App.unescaped}}
</script>​

JavaScript:

App = Ember.Application.create({
    html: '<b>bold text</b>',
    unescaped: function(){
        return this.get('html').htmlSafe();
    }.property('html')
});​

Answer 3

Ember 2.x, using JavaScript

To make a string unescaped and output using Ember templates you can use htmlSafe helper.

Ember.String.htmlSafe('<div>someString</div>')

The returned string will not be HTML escaped by Handlebars template engine.

http://emberjs.com/api/classes/Ember.String.html#method_htmlSafe

Use Handlebars Only

Alternatively, you can pass the raw HTML to Handlebars template and get the raw HTML output by using triple brackets

Inside Handlebars Template

<div>{{{raw_html_content}}}</div>