Javascript 车把模板渲染模板为文本
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/7168469/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Handlebars Template rendering template as text
提问by egidra
I created a helper in Handlebars to help with logic, but my template parses the returned html as text rather than html.
我在 Handlebars 中创建了一个帮助程序来帮助处理逻辑,但我的模板将返回的 html 解析为文本而不是 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):
这是一个描述正确回合的模板(假设它呈现了 #round-end-correct 模板):
<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?
不是 HTML,而是文本。我如何让它实际将 HTML 呈现为 HTML,而不是文本?
回答by Geert-Jan
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:
我认为 Handlebars 中的 unescaping 与 vanilla Mustache 中的工作方式相同。在这种情况下,使用三重胡须来取消转义 html, i,e: {{{unescapedhtml}}}
,例如:
<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
回答by Peter Pajchl
Geert-Jan's answers is correct but just for reference you can also set the result to "safe" directly inside the helper (code from handlebars.js wiki)
Geert-Jan 的答案是正确的,但仅供参考,您也可以直接在助手内部将结果设置为“安全”(来自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);
});
With that you can use regular double handlebars {{ }} and handlebars won't escape your expression.
有了它,您可以使用常规的双把手 {{ }} 并且把手不会逃脱您的表达。