使用Handlebars .js(多个HTTP请求)的多个预编译模板？

Question

我认为这个问题会给我一些更多的背景:

使用Handlebars.js预先编译的模板(jQuery Mobile环境)

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

因此,如果有人可以提供一些亮点,也许提供一个替代方案,我可以从我的HTML获取模板,但不必加载100个不同的模板文件.

Answer 1

像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插件来执行测试和加载/编译代码,同时保持开发人员的简单.