使用Handlebars.js（jQuery Mobile环境）的预编译模板
我在Handlebars中预编译模板时感到困难。 我的jQuery Mobile项目正在变得相当大的模板明智，我希望预编译我使用的模板。
但是，我似乎无法find一个很好的解释（如一步一步的教程）如何使用Handlebars做到这一点。
我仍然有我的模板全部使用脚本标签内联。 我有安装使用NPM车把。 但现在我有点迷路了。
我正在做一些类似的事情
handlebars -s event.handlebars > event.compiled 并以某种方式包括event.compiled内容？ 但是，那么怎么称呼呢。
我打电话像我这样的模板
var source = $('#tmpl_profile').html(), template = Handlebars.compile(source), context = user.profile()), html = template(context);
希望有人能为我阐明这一点。
所以经过多次试验和错误（这是学习它的最好方法），这是对我有用的方式。
首先，将所有模板外部化，假设你在脚本标签内部有一个模板
<script id="tmpl_ownevents" type="text/templates"> {{#unless event}} <div class="notfoundevents"><p>No events for you</p></div> {{/unless}} </script>
创build一个名为events.tmpl的新文件，并将模板复制/粘贴到该文件中。 一定要删除脚本元素本身，这个怪胎在我..
像这样安装Handlebars命令行脚本
npm install -g handlebars
转到已保存events.tmpl的文件夹并运行
handlebars events.tmpl -f events.tmpl.js
包含Handlebars.js后，将编译后的JavaScript包含到HTML中
<script src="events.tmpl.js"></script>
现在剩下的就是把你正常的模板代码改成类似下面的代码
var template = Handlebars.templates['events.tmpl'], // your template minus the .js context = events.all(), // your data html = template(context);
在那里，你已经有了超快的预编译的Handlebars模板。
另一个很好的select是使用GruntJS 。 一旦安装：
npm安装grunt-contrib-handlebars –save-dev
然后在你的gruntfile.js里面
grunt.initConfig({ dirs: { handlebars: 'app/handlebars' }, watch: { handlebars: { files: ['<%= handlebars.compile.src %>'], tasks: ['handlebars:compile'] } }, handlebars: { compile: { src: '<%= dirs.handlebars %>/*.handlebars', dest: '<%= dirs.handlebars %>/handlebars-templates.js' } } }); grunt.loadNpmTasks('grunt-contrib-handlebars');
然后，只需从控制台inputgrunt watch ，grunt就会自动将所有* .handlebars文件编译到handlebars-templates.js文件中。
真正rad方式与车把一起工作。
这是我做的方式：
制备
我们将假设所有的模板variables都在一个名为context的variablescontext ：
var context = { name: "Test Person", ... };
在哪里放你的模板
创build一个包含所有模板的目录（我们将其称为templates/ ）在这里添加您的模板，名为filename.handlebars 。
你的目录结构：
. └── templates ├── another_template.handlebars └── my_template.handelbars
编译你的模板
首先进入你的根目录，然后用npm CLI程序编译你的模板：
handlebars templates/*.handlebars -f compiled.js
新的目录结构：
. ├── compiled.js └── templates ├── another_template.handlebars └── my_template.handlebars
用法
在包含运行时后，将compiled.js包含在HTML页面中：
<script src="handlebars.runtime.js"></script> <script src="compiled.js"></script>
使用全局Handlebars对象呈现您的模板：
// If you used JavaScript object property conform file names // Original filename: "my_template.handlebars" Handlebars.templates.my_template(context) // if you used special characters which are not allowed in JavaScript properties // Original filename: "my-template.handlebars" Handlebars.templates["my-template"](context)
备注
请注意文件扩展名.handlebars 。 编译模板时会自动剥离。
额外：如果您将Jetbrains IDE与Handlebars / Mustache插件一起使用，您甚至可以获得相当不错的编辑器支持。
用Grunt预编译手柄模板
假设你已经安装了Node.js。 如果你不这样做，那就去做吧。
1）设置节点依赖关系：
在你的应用程序根目录下添加一个名为package.json的文件。 将以下内容粘贴到该文件中：
{ "devDependencies": { "grunt-contrib-handlebars": "~0.6.0", "grunt-contrib-watch": "~0.5.3", "handlebars": "~1.3.0" }, }
这个JSON文件告诉节点需要安装哪些软件包。 这有助于让其他开发人员快速启动，正如您在下一步中看到的那样。
2）安装节点依赖关系：
在terminal/命令提示符/ powershell中， cd到您的项目根目录并运行以下命令：
npm install grunt -g npm install grunt-cli -g
并安装package.json中列出的依赖关系：
npm install
现在，您已经安装了您需要的所有节点依赖项。 在您的项目根目录中，您将看到一个node_modules folder 。
3）configurationGrunt：
在您的项目根目录中，创build一个名为Gruntfile.js的文件。 将以下内容粘贴到该文件中：
module.exports = function(grunt) { var TEMPLATES_LOCATION = "./src/templates/", // don't forget the trailing / TEMPLATES_EXTENSION = ".hbs", TEMPLATES_OUTPUT_LOCATION = TEMPLATES_LOCATION, // don't forget the trailing / TEMPLATES_OUTPUT_FILENAME = "compiled_templates.js"; // don't forget the .js grunt.initConfig({ watch: { handlebars: { files: [TEMPLATES_LOCATION + '**/*' + TEMPLATES_EXTENSION], tasks: ['handlebars:compile'] } }, handlebars: { compile: { src: TEMPLATES_LOCATION + '**/*' + TEMPLATES_EXTENSION, dest: TEMPLATES_OUTPUT_LOCATION + TEMPLATES_OUTPUT_FILENAME, options: { amd: true, namespace: "templates" } } } }); grunt.loadNpmTasks('grunt-contrib-handlebars'); grunt.loadNpmTasks('grunt-contrib-watch'); }
4）configuration你的喜好：
如果您不使用Require.js ，则需要将handlebars.compile.options.amd更改为false 。 您可能还想调整namespace选项，以您的喜好。 如果您使用的是require / amd模块，则命名空间属性是不重要的（如果您将其删除，则默认为“JST”）。
因为所有的项目结构都有些不同，所以你只需要configuration一下Gruntfile。 修改常量TEMPLATES_LOCATION ， TEMPLATES_EXTENSION ， TEMPLATES_OUTPUT_LOCATION ， TEMPLATES_OUTPUT_FILENAME以适合您的项目。
如果您的模板分散在整个应用程序中，则需要将TEMPLATES_LOCATION更改为可能的最低目录。 确保您的模板与您的node_modules，bower_components或任何其他第三方目录隔离，因为您不希望Grunt将第三方模板编译到您的应用程序编译模板中。 如果您将所有自己的代码包含在./app目录中，则可以。
5）用Grunt编译模板：
要在后台运行grunt，打开你的terminal，并进入你的项目根目录并运行命令： grunt watch:handlebars （只是grunt watch也可以）。 在后台运行grunt时，所有对模板文件的更改都将被自动编译，并且指定的输出文件handlebars.compile.dest将根据需要进行重写。 输出结果如下所示：
Running "watch" task Waiting...
要单独运行编译任务，打开你的terminal，并进入你的项目根目录并运行命令： grunt handlebars:compile （只是grunt:handlebars也可以）。 输出结果如下所示：
Running "handlebars:compile" <handlebars> task File "./src/templates/compiled_templates.js" created. Done, without errors.
对于Handlebars 2.0.0 alpha更新：
@Macro已经很清楚的解释了它是如何与一块模板一起工作的，请看这个答案如何使handlebars.js工作
如果在使用预编译模板时看到“TypeError：”未定义“不是函数”：
这个错误发生在“handlebar.runtime.js”行436，当评估templateSpec.call（容器，Handlebars，上下文，选项.helpers，选项.partials，options.data）时，
因为安装的编译器npm与浏览器使用的不匹配。 下载的最新稳定版本是v1.3.0，如果你使用npm安装把手，它会为你安装2.0.0-alpha4。
请检查使用
handlebars any_your_template_before_compile.handlebars | grep "compiler"
这会给你喜欢的，如果你确实安装了手柄2.0.0-alpha4：
this.compiler = [5, '>=2.0.0']
第一个数字表示您的手柄编译器的版本。 在浏览器控制台中input以下代码，查看结果是否与版本匹配。
Handlebars.COMPILER_REVISION
如果你有浏览器修订版本4的编译器5，那么你将会遇到上述问题。
要修复它，请使用以下命令安装手柄1.3.0
npm install handlebars@1.3.0 -g
然后尝试再次编译，你会看到这一次，它给你匹配的版本信息，你很好去预编译模板。
this.compilerInfo = [4, '>=1.0.0']
只要解释一下你是否有大量的模板：
首先将每个支撑模板的外观进行外部化：event.handlebars，item.handlebars等…您可以将它们全部放在一个文件夹中，比如“/ templates”
使用以下命令编译所有文件并将其连接成1个文件：
handlebars *.handlebars -f templates.js
并在你的HTML中包含handlebars.runtime这个文件
<script src="/lib/handlebars.runtime.js"></script> <script src="templates.js"></script>
这些模板将通过其名称注入到Handlebars.templates中。 例如，可以通过Handlebars.tempaltes ['event']访问event.handlebars。
