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

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>

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

最终目标只是让我的模板与 js 代码(和 html)分开。

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

想法？

Answer 1

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