ハンドルバーテンプレートとしてのテンプレートレンダリングテンプレート

Question

ロジックを手助けするためにハンドルバーにヘルパーを作成しましたが、テンプレートは返されたhtmlをhtmlではなくテキストとして解析します。

私はクイズが完了した後にレンダリングされるクイズの結果ページがあります。ラウンドのそれぞれについて

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

、私はラウンドの結果をレンダリングするテンプレートを決定するためにヘルパーを使用します。

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"); 
    } 
    }); 

を

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

：ここ

は正しいラウンドを記述するテンプレートは（それが＃ラウンド終了正しいテンプレートをレンダリングされたと言うのは、見てみましょう）でありますここ

は、レンダリングされるものです：ないHTMLとしてではなく、テキストとして

<div></div> 

。実際にHTMLをテキストではなくHTMLとしてレンダリングするにはどうすればよいですか？

Answer 1

ハンドルバーのエスケープ処理は、バニラ・ムスタッシュと同じように動作します。同様に、{{{unescapedhtml}}}を：：REF参照してください

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

：その場合は は、HTML、I、Eをアンエスケープするトリプル口ひげを使用 http://mustache.github.com/mustache.5.html

Answer 2

はGeert-月の答えが正しいですが、ただの参考のためヘルパー内で結果を「安全」に設定することもできます（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); 
}); 

これで、普通の二重ハンドルバー{{}}を使うことができ、ハンドルバーはあなたの式をエスケープしません。