Javascript 在handlebar.js中使用多个预编译模板(多个HTTP请求)?
我想这个问题会给我提供更多的背景: 基本上,我正在尝试学习预编译的内容,这样我可以节省加载时间并保持html文档整洁。我还没有开始,但基于上面的链接,每个模板都需要有自己的文件。这不是要加载很多链接吗?如果不需要的话,我不想发出多个HTTP请求Javascript 在handlebar.js中使用多个预编译模板(多个HTTP请求)?,javascript,handlebars.js,Javascript,Handlebars.js,我想这个问题会给我提供更多的背景: 基本上,我正在尝试学习预编译的内容,这样我可以节省加载时间并保持html文档整洁。我还没有开始,但基于上面的链接,每个模板都需要有自己的文件。这不是要加载很多链接吗?如果不需要的话,我不想发出多个HTTP请求 因此,如果有人能提供一些线索,也许可以提供一个替代方案,我可以从html中获取模板,但不必加载100个不同的模板文件。像Grunt.js这样的工具允许您拥有模板并使用它们。例如,此文件编译模板,然后将其连接到单个文件中: module.exports
因此,如果有人能提供一些线索,也许可以提供一个替代方案,我可以从html中获取模板,但不必加载100个不同的模板文件。像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");
};
module.exports=函数(grunt){
grunt.loadNpmTasks(“grunt contrib把手”);
//项目配置。
grunt.initConfig({
//项目元数据,由指令使用。
元:{},
车把:{
地区:{
选项:{
名称空间:“JST”,
包装:“真实”
},
档案:{
“templates.js”:[
“/fileA.tmpl”,
“/fileB.tmpl”
]
}
}
}
});
//默认任务。
注册任务(“默认”、“把手”);
};
因为我刚刚开始使用预编译模板,所以我还没有解决的是工作流。我希望在运行已部署版本的应用程序时能够编译模板,但在进行开发和调试时,我更希望以未编译的形式保存原始的单个文件,这样我就可以编辑它们并重新加载页面
跟进:
在研究了如何在可用时使用预编译模板,以及如何在人们进行开发和调试工作时使用可以动态编辑的单个模板,并希望在不进行Grunt构建的情况下快速编辑重新加载测试周期之后,我想回到这一点
我给出的答案是检查JST[]数据结构是否存在,然后进一步测试并查看该结构中是否存在特定的预编译模板。如果是这样的话,就不需要再做什么了。如果不存在,则加载模板(我们使用RequireJS来完成此操作),并将其编译并放入相同的JST[]数组中,其名称与加载预编译模板时的名称相同
这样,当实际使用模板时,代码只在一个位置查找模板,并且始终是相同的
在不久的将来,我想我们可能会有RequireJS插件来执行测试和加载/编译代码,同时让开发人员保持简单。+1这很有效,grunt还提供了许多其他很酷的功能!例如:提示、手表等