将模板呈现为文本
Handlebars Template rendering template as text
本文关键字:文本 更新时间:2023-09-26
我在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,而不是文本?
我假设Handlebars中的un转义与香草Mustache中的工作原理相同。在这种情况下,使用三个八字胡对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
Geert-Jan的答案是正确的,但仅供参考,您也可以将结果直接设置为"safe"在helper中(代码来自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);
});
你可以使用常规的双把手{{}}和把手不会转义你的表达式。
相关文章:
- 如何使用jquery在填充自动完成的值后使文本框只读
- 使用Clipboard.js复制span文本
- 使用JS如何动态更改显示的html文件中的文本背景颜色
- 用程序搜索JQuery数据表中的文本
- jQuery匹配JSON对象的部分文本
- onkeyup无法动态创建多个文本区域
- 如何在下面的ES6循环中获得前面的文本
- 将输入字段中的文本提交到我的数据库,同时将其添加到我的列表中
- 让文本输入幻灯片显示输入时的新文本输入?然后向后滑动
- 借助asp.net验证或java脚本对多个文本进行验证
- 无法在ajaxStart中更改跨度文本
- 高亮显示时编辑文本大小和颜色
- jquery中的文本框验证
- Javascript,有没有一种方法可以将数组写成没有逗号或空格的单个文本字符串
- Sails.js:同时发布文本输入和一个文件
- 当鼠标悬停在文本中的单词上时显示警报
- 是否有任何方法可以使用jQuery替换在数组中定义值的文本
- 将纯文本URL转换为可单击链接
- 如何使用nodes和.createElement(“b”)将文本加粗
- 是否可以将一个函数输入连接到另一个函数调用的文本