javascript - Plantilla de renderizado de plantillas de manillares como texto

template-engine mustache

Question

Creé un ayudante en Handlebars para ayudar con la lógica, pero mi plantilla analiza el html devuelto como texto en lugar de html.

Tengo una página de resultados de prueba que se muestra después de completar el cuestionario:

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

Para cada una de las rondas, utilizo un ayudante para determinar qué plantilla generará el resultado de una ronda:

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

Aquí hay una plantilla que describe una ronda correcta (supongamos que representa la plantilla # round-end-correct):

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

Esto es lo que se renderiza:

<div></div>

No como HTML, sino como texto. ¿Cómo obtengo que realmente represente el HTML como HTML, en lugar de texto?

Answer 1

Las respuestas de Geert-Jan son correctas, pero solo como referencia también puedes establecer el resultado como "seguro" directamente dentro del helper (código de la wiki de handlebars.js)

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

Con eso puedes usar manillares dobles regulares {{}} y los manillares no escaparán a tu expresión.

Answer 2

Supongo que unescaping en Handlebars funciona igual que en vanilla Moustache. En ese caso, use bigotes triples para unescape html, i, e: {{{unescapedhtml}}} , como:

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

para ver ref: http://mustache.github.com/mustache.5.html