Question

我试图弄清楚如何将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>

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

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

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

思想？

Answer 1

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

Answer 2

我使用requirejs及其文本插件解决了这个问题。在开发期间，使用XHR请求加载模板。部署后，我使用requirejs r.js文件进行了优化，然后将模板包含在主js文件中，保存了许多要加载的文件。

Answer 3

目前正在开发一个API（HTML Imports）来实现此目的 - 概述HTML5Rocks。但是，由于正在开发中，除了可以使用有限浏览器支持的应用程序之外，它可能不合适。

其他选择是通过Ajax和/或构建系统来编写自己的东西。

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

3 个答案: