预编译 JavaScript 模板以在项目构建时发挥作用

Question

更新 我想避免在客户端编译模板，并在本地 ant 构建过程中编译它们。也许像将 jQuery 和 jQuery 模板加载到 rhino 中，依次将每个 .jst 文件的内容传递给 $.template() 函数，并构建一个应包含以下内容的“templates.js”

$.template['model-view'] = resultingFunction.toString();
// 1 for each .jst file

： ，我可以将每个模板维护在单独的文件中，并避免让所有客户端冗余地编译相同的模板。

---

我正在使用 jQuery 模板，并希望将它们分离到自己的文件中（例如 model-view.jst），这些文件在项目构建时编译成函数，并在 jQuery .tmpl() 范围中可用以供以后使用使用。

例如，给定文件 model-view.jst

<li>${name}</li>

该文件和所有其他 .jst 文件应该在构建时选取，编译成一个函数，稍后可以在程序中的任何位置使用，如下所示：

$.tmpl('model-view', {
    name: 'Matt'
});

Answer 1

我使用 Node.js 和 Coffeescript 将部分目录模板化为可执行的预编译函数，解决了这个问题。希望这有帮助。

https://github.com/wookiehangover/jquery-tmpl-jst

Answer 2

我让你决定是否喜欢:)

在你常见的js库中定义这个函数：

function loadTemplate(templateName) {
   $.ajax({
      url: templateName + '.jst',
      success: function(data) {
         $.template(templateName, data);
      }});
}

然后在你的master hml文件部分你可以添加：

<script type="text/javascript">loadTemplate('model-view');</script>
<script type="text/javascript">loadTemplate('another-model-view');</script>

所以你可以在代码中的任何地方使用

$.tmpl('model-view', your-data)
$.tmpl('another-model-view', your-data)

希望它有帮助