【发布时间】：2011-05-01 09:00:29
【问题描述】：
我一直在阅读有关 jQuery 模板插件 http://api.jquery.com/tmpl/ 作为将数据绑定到标记的方法。所有示例似乎都表明您在脚本新脚本标记中定义了模板。实际上，我不想让我的 html <head> 与所有这些脚本标签混在一起。
有没有更好的组织方式？也许有一个充满动态加载脚本的模板文件夹？
【问题讨论】：
【发布时间】：2011-05-01 09:00:29
【问题描述】：
您不必这样做。您可以（例如）将模板保存在 .js 文件中（有点像消息目录）：
// this is a file full of templates
var SITE_TEMPLATES = {
ERROR_1: 'This is an error template: the error is ${error.msg}',
WHATEVER: 'I cannot make this stuff up but you get the ${idea}'
};
把它拉进去，然后你就可以通过
使用模板了$('#someplace').append($.tmpl(SITE_TEMPLATES.ERROR_1, { error: { msg: "hello world" }}));
换句话说，$.tmpl() 允许您将模板主体作为第一个参数传入，它可以来自任何地方。
另外，由于将长模板编写为 Javascript 字符串常量有点麻烦，您可以在单个静态 HTML 文件中堆积一堆文本 <script> 标记。然后，您可以 AJAX 并将其放入隐藏的 <div> 或其他内容中。这样您仍然可以获得缓存的优势，并且可能更容易维护模板。
当然，按照这些思路，您可以将模板作为单独的文件单独维护，并在站点构建时根据任何打包方案将它们粘合在一起。
【讨论】：
-
不应该将 SCRIPT 元素作为 BODY 的子元素而不是（例如）放在 DIV 中吗？
-
<script>元素几乎可以出现在任何地方，包括<div>元素内部。 -
@Pointy 是的，但是有理由将它们放在其他元素中吗？将 SCRIPT 放入隐藏的 DIV 是否会阻止脚本执行？
-
@Šime Vidas 在这种情况下，我们不希望脚本执行！它们是模板主体，因此
<script>标签被标记为具有“text/html”或“text/plain”类型。浏览器无论如何都不会执行这些。然而，一般来说，将<script>放在<div>中就可以了。现在，当添加动态内容时，有必要明确评估脚本标签。无论脚本标签（使用内嵌 Javascript）附加到文档的哪个位置，都是如此。 -
@Pointy 我认为我们不能阻止浏览器评估 SCRIPT 元素。一旦它们被添加到 DOM 中，它们就会被评估。顺便说一句，我在我的模板 SCRIPT 元素上使用
text/x-jquery-tmpl类型。我不确定浏览器在模板的情况下采取了哪些步骤，但我不相信它取决于 SCRIPT 元素的位置。那为什么要把它们放在其他元素中呢？在我看来，总是将它们附加为 BODY 的孩子应该是最合理的。
您可以将模板存储在外部文件中（例如，通过 Ajax 获取它们）。
引用http://api.jquery.com/jQuery.template/
"... 对于远程模板，您可以使用所需的任何 AJAX 调用将模板标记作为字符串获取，或者您可以简单地使用指向定义字符串的 js 文件的静态脚本块。然后您应该使用jQuery.template 从字符串编译模板，然后从那里开始，使用 jQuery.tmpl 渲染它