web-dev-qa-db-ja.com

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

ロジックを支援するためにHandlebarsにヘルパーを作成しましたが、テンプレートは返された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");
    }
  });

正しいラウンドを説明するテンプレートを次に示します（＃round-end-correctテンプレートをレンダリングしたとしましょう）：

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

レンダリングされるものは次のとおりです。

<div></div>

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

javascripttemplate-enginemustachehandlebars.js
52
egidra

Handlebarsでのエスケープ解除はVanilla Moustacheと同じように機能すると思います。その場合、トリプルヒゲを使用してHTMLのエスケープを解除します。つまり、{{{unescapedhtml}}}、など：

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

参照用： http://mustache.github.com/mustache.5.html

148
Geert-Jan

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

これにより、通常のダブルハンドルバー{{}}を使用でき、ハンドルバーは式をエスケープしません。

19
Peter Pajchl