Handlebars Template rendering template as text

Question

I created a helper in Handlebars to help with logic, but my template parses the returned html as text rather than html.

I have a quiz results page that is rendered after the quiz is completed:

  <script id="quiz-result" type="text/x-handlebars-template">         {{#each rounds}}           {{round_end_result}}         {{/each}}         <div class="clear"></div>   </script> 

For each of the rounds, I use a helper to determine which template to render a round's result:

  Handlebars.registerHelper("round_end_result", function() {     if (this.correct) {       var source = '';       if (this.guess == this.correct) {         console.log("correct guess");         var source = $("#round-end-correct").html();       } else {         var source = $("#round-end-wrong").html();       }       var template = Handlebars.compile(source);       var context = this;       var html = template(context);       console.log(html);       return html;     } else {       console.log("tie");     }   }); 

Here is a template that describes a correct round (let's take say it rendered the #round-end-correct template):

  <script id="round-end-correct" type="text/x-handlebars-template">         <div></div>   </script> 

Here is what gets rendered:

<div></div> 

Not as HTML, but as text. How do I get it to actually render the HTML as HTML, rather than text?

Answer 1

I assume that unescaping in Handlebars works the same as in vanilla Mustache. In that case use triple mustaches to unescape html, i,e: {{{unescapedhtml}}}, like:

<script id="quiz-result" type="text/x-handlebars-template">     {{#each rounds}}       {{{round_end_result}}}     {{/each}}     <div class="clear"></div> 

for ref see: http://mustache.github.com/mustache.5.html

Answer 2

Geert-Jan's answers is correct but just for reference you can also set the result to "safe" directly inside the helper (code from handlebars.js wiki)

Handlebars.registerHelper('foo', function(text, url) {    text = Handlebars.Utils.escapeExpression(text);   url = Handlebars.Utils.escapeExpression(url);    var result = '<a href="' + url + '">' + text + '</a>';    return new Handlebars.SafeString(result);  }); 

With that you can use regular double handlebars {{ }} and handlebars won't escape your expression.