把手模板作为文本呈现模板 [英] Handlebars Template rendering template as text

问题描述

我在Handlebars中创建了一个帮助逻辑的帮助器，但我的模板会将返回的html解析为文本而不是html。

我有一个测验结果页在测验完成后呈现：

 < script id =quiz-resulttype =text / x-handlebars-模板> 
 {{#each轮}} 
 {{round_end_result}} 
 {{/每}} 
将DIV类= 清晰 >< / DIV> 
< / script> 
  

对于每个回合，我使用助手来确定要渲染回合结果的模板：

  Handlebars.registerHelper（ round_end_result，函数（）{
如果（this.correct）{
 var source =''; 
 if（this.guess == this.correct）{
 console.log（correct guess）; 
 var source = $（＃round-end （）; 
} 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-正确的模板）：

 < script id =round-end-correcttype =text / x-handlebars-template > 
< div>< / div> 
< / script> 
  

以下是呈现的内容：

 < DIV>< / DIV> 
  

不是HTML，而是文本。我怎样才能让HTML实际呈现为HTML，而不是文本？

解决方案

我假设在Handlebars中进行转义工作和香草胡子一样。
在这种情况下，使用三重胡须来unescape html，i，e： {{{unescapedhtml}}} ，例如：

 < script id =quiz-resulttype =text / x-handlebars-template> 
 {{#each轮}} 
 {{{round_end_result}}} 
 {{/每}} 
将DIV类= 清晰 >< / DIV> ; 
  

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

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?

解决方案

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

这篇关于把手模板作为文本呈现模板的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！