Grunt компилирует руль по-разному, и я не могу загрузить скомпилированный шаблон

Я возиться с Handlebars и пытаюсь скомпилировать шаблоны с помощью 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.

И это структура файла:

Папочная структура проекта

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'];
Другие вопросы по тегам