将 jquery/js 模板存储在单独的文件中答案

【问题标题】：Storing jquery/js templates in a separate files将 jquery/js 模板存储在单独的文件中
【发布时间】：2011-11-11 15:36:49
【问题描述】：

我试图弄清楚如何将 jQuery 模板存储在与基本 html 不同的文件中（不使用字符串或 ajax 请求）。

例如，在我的 html 页面上，我想这样做：

<script type ="text/x-jquery-tmpl" id="personTmpl" src="js/personApp.tmpl.html"></script>
<div id="container"></div>
<script type="text/javascript">
    var p = { name: 'joe' };
    $( "#personTmpl" ).tmpl( p ).appendTo( "#container" );
</script>

#personTmpl 将在 personApp.tmpl.html 文件（或其他地方）中定义的位置

最终目标是将我的模板与 js 代码（和 html）分开。

我不喜欢字符串方法，因为它使编辑较长的模板变得困难。而且我也不想在加载时触发 ajax 请求（注意，模板文件最终会被聚合用于生产）。

想法？

【问题讨论】：

我也遇到过这个问题，但我不确定这是否可行。查看资源后，浏览器似乎甚至没有请求该文件。我确实知道 IE 将是一个问题。如果 IE 不能识别 type 属性，它不会加载脚本标签。我最终只使用了 ajax。

标签： javascript jquery templates jquery-templates

【解决方案1】：

我遇到了类似的情况，我的解决方案是编写一个模板缓存对象，该对象负责在第一次请求模板时通过 ajax 加载模板并从那时起存储在内存中。它对我的项目非常有效。如果您有兴趣，我可以发布我使用的代码。

【讨论】：

【解决方案2】：

我使用 requirejs 和他们的文本插件解决了这个问题。在开发过程中，使用 XHR 请求加载模板。部署时，我使用 requirejs r.js 文件进行优化，然后将模板包含在主 js 文件中，节省了许多要加载的文件。

【讨论】：