Шаблоны рендеринга шаблонов ручек в виде текста
Я создал помощника в 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, а не текст?
Ответы
Ответ 1
Я предполагаю, что unescaping в Handlebars работает так же, как и в Vanilla Mustache.
В этом случае используйте тройные усы для unescape html, i, e: {{{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
Ответ 2
Ответы Geert-Jan верны, но только для справки вы также можете установить результат в "безопасный" непосредственно внутри помощника (код из файла 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);
});
С этим вы можете использовать обычные двойные дескрипторы {{}}, а ручки не будут выходить из вашего выражения.