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

Question

背景

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

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

但许多开发人员（可以理解）不喜欢这样，因为他们在脚本块内的代码编辑器中丢失了HTML语法高亮。我见过这样的解决方法：Keep correct HTML syntax highlighting in <script> "text/html" templates。这个问题不是要求解决方法。

我知道一个危险是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>内，浏览器会破坏模板的示例：

Answer 2

另一个例子，如果您有以下内联模板（包含在div中）：

<div id="template">
   {#Users}
       <a href="/ViewUser?ID={UserID}">{UserName}</a>
   {/Users}
</div>

然后你使用jQuery.html（）来获取模板文本，根据浏览器的不同，你会得到不同的结果。 Firefox是最糟糕的，因为它逃离了href内的括号。

Chrome 26.0.1410.64：

{#Users}
     <a href="/ViewUser?ID={UserID}">{UserName}</a>
{/Users}

Firefox 10.0.1：

{#Users} 
    <a href="/ViewUser?ID=%7BUserID%7D">{UserName}</a> 
{/Users}

IE 8.0.7601.17514：

{#Users} 
    <A href="/ViewUser?ID={UserID}">{UserName}</A> 
{/Users}