我想使用underscorejs的模板功能。似乎HTML5的<template>
标签非常适合此操作,但有一个障碍... underscorejs插值标签(<%
并且%>
转义了html,因此模板标签中的HTML看起来像这样:
$('template.new-email').html()
=>
"
<div class="email">
<div class="timestamp">
<%= received %>
</div>
<div class="from">
<%= from %>
</div>
<div class="title">
<%= title %>
</div>
<div class="message">
<%= message %>
</div>
</div>
"
好吧,那太糟了。
现在,事实证明,如果我使用虚拟类型的脚本标签,例如“ x-underscore-templates”,那么它看起来很笨拙:
$('.new-email').html()
=>
"
<div class="email">
<div class="timestamp">
<%= received %>
</div>
<div class="from">
<%= from %>
</div>
<div class="title">
<%= title %>
</div>
<div class="message">
<%= message %>
</div>
</div>
"
所以我的问题是-我可以使用模板标签吗?如何在字符串中仅获取所需的字符,以便将其传递给下划线的模板系统?
注意-由于我现在正在使用的服务器是使用把手作为服务器端模板系统的hapijs /节点服务器,因此我不能仅使用{{和}}。
我也喜欢使用模板标记的想法,并且我试图使下划线模板以各种方式在html5模板元素中工作。不幸的是,template元素专门表示一个html模板,并且内容将被转换为文档片段,这不适合许多有效的下划线模板,即使它们以后会呈现为有效的html。
因此,我建议的唯一用法是,您可以将脚本元素组织在模板元素中,如下所示:
<template class="underscore-templates">
<script id="new-email">
<div class="email">
<div class="timestamp">
<%= received %>
</div>
<div class="from">
<%= from %>
</div>
<div class="title">
<%= title %>
</div>
<div class="message">
<%= message %>
</div>
</div>
</script>
<script id="other">
</script>
</template>
然后将它们隔离以安全地执行以下操作:
var templates = $('.underscore-templates').prop('content');
_.template($(templates).children('#new-email').html(), {...});
使用template元素作为范围,以防止id冲突的正常问题并以脚本形式执行这些模板。
(不过,这将仅限于现代浏览器,而无需深入研究如何(或是否)可以在较旧的浏览器中检索模板元素的内容并将其呈现为可搜索的片段。)
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句