Handlebars模板将模板呈现为文本

Question

我在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，而不是文本？

- egidra

Answer 1

我假定Handlebars中的反转义与原始Mustache相同。 在这种情况下，使用三个大括号来取消转义html，即：{{{未转义html}}}，例如：

<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

- Geert-Jan

---

当我使用registerBoundHelper并且有两个参数时，这种方法对我来说不起作用。但是，“return new Handlebars.SafeString(result);”对我有效。 - Presse

Answer 2

Geert-Jan 的答案是正确的，但只是为了参考，你还可以直接在 helper 中将结果设置为 "safe"（代码来自 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); 
});

使用这个方法，您可以使用常规的双大括号{{}}，而Handlebars不会转义您的表达式。

- Peter Pajchl