我们为什么要将模板包装在脚本块中？

Question

背景

所有JS模板引擎都建议将模板文本放在脚本块中,如下所示:

<script id="peopleTemplate" type="text/template">
   {#people}
   <div class="person">Name: {firstName} {lastName}</div>
   {/people}
</script>

但许多开发人员(可以理解)不喜欢这个,因为他们在脚本块内的代码编辑器中丢失了HTML语法高亮.我已经看到了这样的解决方法:在<script>"text/html"模板中保持正确的HTML语法突出显示 .这个问题不是要求解决方法.

我知道一个危险是Web浏览器会尝试修复无效的HTML,因此调用$('#peopleTemplate').html()将产生不可预测的结果.然而,在我的头脑中,我想不出任何例子来说明这一点.

题

用div替换脚本标记有哪些其他危险？

奖励:有人能想出一个很好的小提琴,说明浏览器HTML自动修复？

Answer 1

以下是浏览器自动修复问题的示例:http://jsfiddle.net/KPasF/

模板是:

<table>
    <tr>
        {{#numbers}} <th> {{.}} </th> {{/numbers}}
    </tr>
</table>

数据是:

var json = { "numbers": [ 1, 2, 3 ] };

当模板位于隐藏的div中时,请参阅小提琴http://jsfiddle.net/KPasF/以获取不同的结果,然后再在脚本块中查看.

说明

当您将其置于隐藏状态时<div>,浏览器将剥离<th>标记之外的内容({{#numbers}}和{{#numbers}}胡须标记).它刚刚离开{{.}},它将绑定到json对象并呈现为[object Object]

把模板的<script type='text/html'>块的工作,你所期望的,我们得到三个<th>的

浏览器如果将模板放在一个<div>而不是一个内容中的方式示例<script>: