handlebars.js - 为什么我们应该将模板包装在脚本 block 中？

Question

背景

所有 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 自动修复吗？

Answer 1

以下是浏览器自动修复问题的示例: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> :