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'];