javascript - Grunt 编译 handlebars 的方式不同——我无法加载编译后的模板

Question

我在摆弄 Handlebars，并尝试使用 Grunt 预编译模板。但是，它的输出不同于常规的 handlebars cli 输出。

Grunt 给出以下输出:

this["tpl"] = this["tpl"] || {};
this["tpl"]["templates"] = this["tpl"]["templates"] || {};
this["tpl"]["templates"]["assets/src/templates/test.hbs"] = Handlebars.template({"compiler":[6,">= 2.0.0-beta.1"],"main":function(depth0,helpers,partials,data) {
    var helper, functionType="function", helperMissing=helpers.helperMissing, escapeExpression=this.escapeExpression;
    return "<h1>"
        + escapeExpression(((helper = (helper = helpers.title || (depth0 != null ? depth0.title : depth0)) != null ? helper : helperMissing),(typeof helper === functionType ? helper.call(depth0, {"name":"title","hash":{},"data":data}) : helper)))
        + "</h1>\n<p>"
        + escapeExpression(((helper = (helper = helpers.body || (depth0 != null ? depth0.body : depth0)) != null ? helper : helperMissing),(typeof helper === functionType ? helper.call(depth0, {"name":"body","hash":{},"data":data}) : helper)))
        + "</p>";
},"useData":true});

常规输出是这样的:

(function() {
    var template = Handlebars.template, templates = Handlebars.templates = Handlebars.templates || {};
    templates['test.hbs'] = template({"compiler":[6,">= 2.0.0-beta.1"],"main":function(depth0,helpers,partials,data) {
        var helper, alias1=helpers.helperMissing, alias2="function", alias3=this.escapeExpression;
        return "<h1>"
            + alias3(((helper = (helper = helpers.title || (depth0 != null ? depth0.title : depth0)) != null ? helper : alias1),(typeof helper === alias2 ? helper.call(depth0,{"name":"title","hash":{},"data":data}) : helper)))
            + "</h1>\n<p>"
            + alias3(((helper = (helper = helpers.body || (depth0 != null ? depth0.body : depth0)) != null ? helper : alias1),(typeof helper === alias2 ? helper.call(depth0,{"name":"body","hash":{},"data":data}) : helper)))
            + "</p>";
    },"useData":true});
})();

像这样从 Grunt 加载我的模板是行不通的:

$.getJSON('assets/src/data/data.json', function(data) {
    var testTemplate = tpl['test.hbs'];
    var testHtml = testTemplate(data);
    $('body').append(testHtml);
});

像这样加载我的模板时:

<script>
    $.getJSON('assets/src/data/data.json', function(data) {
        var testTemplate = Handlebars.templates['test.hbs'];
        var testHtml = testTemplate(data);
        $('body').append(testHtml);
    });
</script>

我的 Gruntfile 如下:

module.exports = function(grunt) {
'use strict';
grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    handlebars: {
        compile: {
            options: {
                namespace: 'tpl.templates',
            },
            files: {
                "assets/build/templates/alltemplates.js": "assets/src/templates/*.hbs"
            }
        }
    },
// etc.

这是文件结构:

Answer 1

所以我才发现问题出在 gruntfile 的命名空间选项中。

删除命名空间，这会导致默认命名空间“JST”，然后在控制台中检查 JST 对象给出了第一个提示:

Object {assets/src/templates/test.hbs: function}

因此调用模板的正确方法是:

var testTemplate = JST['assets/src/templates/test.hbs'];

因此，对于命名空间，gruntfile 将显示为:

module.exports = function(grunt) {

    'use strict';

    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),

        handlebars: {
            compile: {
                options: {
                    namespace: 'tpl',
                },
                files: {
                    "assets/build/templates/alltemplates.js": "assets/src/templates/*.hbs"
                }
            }
        },

(等)

以及调用模板的方式:

var testTemplate = tpl['assets/src/templates/test.hbs'];