Insert html in a handlebar template without escaping

Javascripthandlebars.js

Javascript Problem Overview


Is there a way to insert a string with html tags into a handlebars template without getting the tags escaped in the outcoming string?

template.js:

<p>{{content}}</p>

use the template

HBS.template({content: "<i>test</i> 123"})

actual outcome:

<p>&lt;i&gt;test&lt;/i&gt; 123</p>

expected result:

<p><i>test</i> 123</p>

Javascript Solutions


Solution 1 - Javascript

Try like

<p>{{{content}}}</p>

official reference:

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

Solution 2 - Javascript

In your template you must add triple mustaches like this. <p>{{{content}}}</p>

See Official Reference for more information on that.

Solution 3 - Javascript

According to Handlebars documentation, http://handlebarsjs.com/expressions.html

Quote from documentation,

> If you don't want Handlebars to escape a value, use the "triple-stash", {{{

Pass the raw HTML to Handlebars template and get the raw HTML output by using triple brackets.

{{{foo}}}

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionAndreas K&#246;berleView Question on Stackoverflow
Solution 1 - JavascriptPraveenView Answer on Stackoverflow
Solution 2 - JavascriptJernej NovakView Answer on Stackoverflow
Solution 3 - JavascriptX.CreatesView Answer on Stackoverflow