背景
所有 JS 模板引擎都建议将模板文本放在脚本 block 中,如下所示:
<script id="peopleTemplate" type="text/template">
{#people}
<div class="person">Name: {firstName} {lastName}</div>
{/people}
</script>
但是许多开发人员(可以理解)不喜欢这样,因为他们在脚本 block 内的代码编辑器中丢失了 HTML 语法突出显示。我见过这样的解决方法:Keep correct HTML syntax highlighting in <script> "text/html" templates .这个问题不是在询问解决方法。
我知道一种危险是网络浏览器会尝试修复无效的 HTML,因此调用 $('#peopleTemplate').html() 会产生不可预测的结果。然而,在我的脑海中,我想不出任何例子来说明这一点。
问题
用 div 替换 script 标签还有哪些其他危险?
奖励:有人能想出一个很好的 fiddle 来说明浏览器 HTML 自动修复吗?
最佳答案
以下是浏览器自动修复问题的示例:http://jsfiddle.net/KPasF/
模板是:
<table>
<tr>
{{#numbers}} <th> {{.}} </th> {{/numbers}}
</tr>
</table>
数据是:
var json = { "numbers": [ 1, 2, 3 ] };
见 fiddle http://jsfiddle.net/KPasF/当模板在隐藏的 div 中,然后在脚本 block 中时,不同的结果。
解释
当你把它放在一个隐藏的
<div>
, 浏览器将剥离 <th>
之外的内容标签({{#numbers}}
和 {{#numbers}}
mustache 标签)。只剩下 {{.}}
,它将绑定(bind)到 json 对象并呈现为 [object Object]
将模板放入
<script type='text/html'>
block 按您的预期工作,我们得到三个 <th>
的如果模板位于
<div>
中,浏览器如何破坏模板的示例而不是 <script>
:关于handlebars.js - 为什么我们应该将模板包装在脚本 block 中?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15386276/