带有“div”标签而不是“script”的车把模板答案

【问题标题】：Handlebars template with "div" tag instead "script"带有“div”标签而不是“script”的车把模板
【发布时间】：2012-07-25 21:46:16
【问题描述】：

其实问题是在主题... 是否可以制作车把模板框架，识别div标签内的模板而不是script标签内的模板？

例如我想用这个标记创建模板：

<style>
    div.text-x-handlebars {display:none;}
</style>
<div class="text-x-handlebars-template">
    <h2>I'm template</h2>
    <p>{{welcomeMessage}}</p>
</div>

【问题讨论】：

标签： template-engine handlebars.js

【解决方案1】：

是的，您可以将模板放在<div>s 而不是<script>s，例如：

http://jsfiddle.net/ambiguous/RucqP/

然而，这样做充满了危险。如果您将模板放在 <div> 中，那么浏览器会将其解释为 HTML before 您已填写它；因此，如果您的模板的 HTML 直到被填写后才有效，浏览器可能会尝试更正它并把事情弄得一团糟。此外，如果您的模板中有id 属性，那么您最终将得到重复的ids（模板中的一个<div> 和您放入DOM 中的填充模板中的重复），这将导致各种奇怪而有趣的错误。浏览器还将尝试在<div> 中下载模板内的任何图像，这可能是也可能不是问题（如果图像在其src 属性中使用模板变量，这可能是可取的，但可能是不可取的） .

基本上，您可以这样做，但您不应该这样做，您应该将模板放在 <script id="..." type="text/x-handlebars-template"> 元素中。

【讨论】：