Question

我在Handlebars中预先编译模板时遇到了一些困难。我的jQuery Mobile项目在模板方面变得非常大，我希望预编译我使用的模板。

然而，我似乎无法找到一个很好的解释（如一步一步的教程），如何用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);

希望有人可以为我阐明这一点。

Answer 1

经过多次试验和错误（这是学习它的最佳方式），这就是适用于我的方式。

首先外部化所有模板，假设您在脚本标记内有模板，如

<script id="tmpl_ownevents" type="text/templates">
    {{#unless event}}
        <div class="notfoundevents"><p>No events for you</p></div>    
    {{/unless}}
</script>

创建一个名为events.tmpl的新文件，并将模板复制/粘贴到该文件中。一定要删除脚本元素本身，这让我在a ..

安装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模板。

Answer 2

另一个很好的选择是使用GruntJS。安装完成后：

npm install 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');

然后您只需从控制台输入grunt watch，然后grunt会自动将所有* .handlebars文件编译到handlebars-templates.js文件中。

真正使用车把的方式。

Answer 3

这是我的方式：

制备

我们假设所有模板变量都在一个名为context的变量中：

var context = {
    name: "Test Person",
    ...
};

放置模板的位置

创建一个包含所有模板的目录（我们称之为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

用法

在包含运行时后，在您的HTML页面中包含compiled.js：

<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 plugin一起使用，您甚至可以获得相当不错的编辑器支持。

Answer 4

使用Grunt预编译Handlebars模板

假设您安装了Node.js.如果你不这样做，那就去做吧。

1）设置节点依赖性：

在您的应用程序根目录中添加名为package.json的文件。将以下内容粘贴到该文件中：

{
  "devDependencies": {
   "grunt-contrib-handlebars": "~0.6.0",
    "grunt-contrib-watch": "~0.5.3",
    "handlebars": "~1.3.0"
  },
}

此JSON文件告诉Node需要安装哪些软件包。这有助于让其他开发人员快速上手，正如您将在下一步中看到的那样。

2）安装节点依赖项：

在您的终端/命令提示符/ powershell中，cd进入项目根目录并运行以下命令：

npm install grunt -g
npm install grunt-cli -g

并安装package.json中列出的依赖项：

npm install

现在您已经安装了所需的所有节点依赖项。在您的项目根目录中，您将看到node_modules folder。

3）配置Grunt：

在项目根目录中，创建名为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）配置你的喜好：

如果您未使用Require.js ，则需要将handlebars.compile.options.amd更改为false。您可能还想根据自己的喜好调整namespace选项。如果你正在使用require / amd模块，那么命名空间属性并不重要（它的默认值是＆＃34; JST＆＃34;，如果你删除它）。

因为所有项目结构都有点不同，所以您需要稍微配置一下Gruntfile。修改常量TEMPLATES_LOCATION，TEMPLATES_EXTENSION，TEMPLATES_OUTPUT_LOCATION，TEMPLATES_OUTPUT_FILENAME以适合您的项目。

如果您的模板分散在整个应用程序中，则您希望将TEMPLATES_LOCATION更改为可能的最低目录。确保您的模板与node_modules，bower_components或任何其他第三方目录隔离，因为您不希望Grunt将第三方模板编译到您的应用程序编译模板中。如果您将所有自己的代码都包含在./src，./js，./app目录中，那么您就可以了。

5）使用Grunt编译模板：

要在后台运行grunt，请打开终端并将cd打开到项目根目录中并运行命令：grunt watch:handlebars（仅grunt watch也可以）。随着grunt在后台运行，模板文件的所有更改都将自动编译，指定的输出文件handlebars.compile.dest将根据需要重写。输出看起来像这样：

Running "watch" task
Waiting...

要单独运行编译任务，请打开终端并将cd打开到项目根目录中并运行命令：grunt handlebars:compile（仅grunt:handlebars也可以）。输出看起来像：

Running "handlebars:compile" <handlebars> task
File "./src/templates/compiled_templates.js" created.

Done, without errors.

Answer 5

For Handlebars 2.0.0 alpha Update：

@Macro已经非常清楚地解释了它如何与1个模板一起使用，请参阅this answer for how to make handlebars.js works

如果您看到＆＃34; TypeError：＆＃39; undefined＆＃39;不是一个功能＆＃34;使用预编译模板时：

此错误发生在＆＃34; handlebar.runtime.js＆＃34;第436行评估templateSpec.call（容器，Handlebars，context，options.helpers，options.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']

第一个数字代表车把编译器的版本。在浏览器控制台中键入以下代码，查看结果是否与版本匹配。

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等...你可以将它们全部放在一个文件夹中，比如＆＃34; / templates＆＃34;

使用以下命令编译所有文件并将其连接成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 [＆＃39; event＆＃39;]访问event.handlebars。

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

5 个答案:

制备