4

我认为这个问题会给我更多的背景信息：

使用 Handlebars.js 的预编译模板（jQuery Mobile 环境）

基本上我正在尝试学习预编译的东西，这样我就可以节省加载时间并保持我的 html 文档整洁。我还没有开始，但是根据上面的链接，每个模板都需要有自己的文件。那不是要加载很多链接吗？如果不需要，我不想发出多个 HTTP 请求。

因此，如果有人能解释一下，也许可以提供一个替代方案，让我可以从我的 html 中获取模板，但不必加载 100 个不同的模板文件。

4

1 回答 1

6

Grunt.js 之类的工具允许您拥有模板并使用它们。例如，此文件编译模板，然后将它们连接到一个文件中：

module.exports = function(grunt) {
  grunt.loadNpmTasks("grunt-contrib-handlebars");

  // Project configuration.
  grunt.initConfig({
    // Project metadata, used by the <banner> directive.
    meta: {},

    handlebars: {
      dist: {
        options: {
          namespace: "JST",
          wrapped: "true"
        },
        files: {
          "templates.js": [
            "./fileA.tmpl",
            "./fileB.tmpl"
          ]
        }
      }
    }
  });

  // Default task.
  grunt.registerTask("default", "handlebars");
};

自从我刚刚开始使用预编译模板以来，我还没有解决的是工作流程。我希望在运行应用程序的已部署版本时能够编译模板，但在进行开发和调试时，我更愿意将原始的单个文件以未编译的形式保存，这样我就可以编辑它们并重新加载页面。

跟进：

在解决了一些如何在可用时拥有我的预编译模板并使用可以在人们进行开发和调试工作并希望快速编辑时即时编辑的单个模板之后，我想回到这个问题-reload-test 循环而不进行 Grunt 构建。

我想出的答案是检查 JST[] 数据结构的存在，然后进一步测试并查看该结构中是否存在特定的预编译模板。如果是，则无需做任何进一步的事情。如果它不存在，则加载模板（我们使用 RequireJS 来执行此操作）并编译并放入同一个 JST[] 数组中，如果已经加载了预编译的模板，它将具有相同的名称。

这样，当实际使用模板时，代码只会在一个地方查找它，而且总是一样的。

在不久的将来，我认为我们可能会有 RequireJS 插件来执行测试和加载/编译代码，同时让开发人员保持简单。

于 2012-12-06T13:57:12.560 回答