web-dev-qa-db-fra.com

Modèle de rendu du modèle de guidon sous forme de texte

J'ai créé une aide dans les guidons pour aider à la logique, mais mon modèle analyse le code HTML renvoyé en tant que texte plutôt qu'en format HTML.

J'ai une page de résultats de quiz qui est rendue une fois le quiz terminé:

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

Pour chacun des rounds, j'utilise un assistant pour déterminer quel modèle rendre le résultat d'un round:

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

Voici un modèle qui décrit un bon tour (supposons qu'il rend le modèle # round-end-correct):

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

Voici ce qui est rendu:

<div></div>

Pas en HTML, mais en texte. Comment puis-je faire pour rendre le HTML en tant que HTML, plutôt que du texte?

javascripttemplate-enginemustachehandlebars.js
52
egidra

Je suppose que l'échappée dans le guidon fonctionne de la même manière que dans la vanille Moustache. Dans ce cas, utilisez des moustaches triples pour décompresser le code HTML, i, e: {{{unescapedhtml}}}, comme:

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

pour réf voir: http://mustache.github.com/mustache.5.html

148
Geert-Jan

Les réponses de Geert-Jan sont correctes mais juste pour référence, vous pouvez également définir le résultat sur "sûr" directement à l'intérieur de l'assistant (code du wiki 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); 
});

Avec cela, vous pouvez utiliser le double guidon régulier {{}} et le guidon n'échappera pas à votre expression.

19
Peter Pajchl