Grunt以不同的方式编译把手 - 我无法加载已编译的模板

Question

我正在搞乱Handlebars，我正在尝试使用Grunt预编译模板。但是它的输出与常规车把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中的namespace选项中。

删除命名空间，导致默认命名空间'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'];