TypeError:Handlebars.templates未定义

Question

我工作yeoman,gruntjs和handlebars.js,但是我的模板不与萤火以下错误加载了:

TypeError: Handlebars.templates is undefined
    var compiledTemplate = Handlebars.templates['cheatsheet.hbs'];

Handlebars.JS

在我package.json,我得到:

"grunt-contrib-handlebars": "~0.5.9" // previously used ~0.5.8

Gruntjs的任务

任务: handlebars

我编译.hbs到.hbs.js文件:

handlebars: {
    compile: {
        options: {
            namespace: 'JST'
        },
        files: {
            '<%= yeoman.app %>/scripts/cheatsheet.hbs.js':
            [ '<%= yeoman.app %>/templates/{,*/}*.hbs'] ,
        }
    }
},

任务: watch

我在以下watch部分添加了以下内容:

watch: {
    // recompile handlebars' templates when they change
    // @see: https://github.com/yeoman/yeoman/wiki/Handlebars-integration
    handlebarsCompile: {
        files: ['<%= yeoman.app %>/templates/{,*/}*.hbs'],
        tasks: ['handlebars:compile']
    },
    handlebarsReload: {
        files: ['<%= yeoman.app %>/scripts/{,*/}*.hbs.js'],
        tasks: ['livereload']
    },

任务:grunt server和grunt build

我在这两个任务中添加了以下条目:

    'handlebars:compile',

HTML文件

我正在导入把手,模板和脚本来给它充气:

<script src="components/handlebars.js/dist/handlebars.runtime.js"></script>
<script src="scripts/cheatsheet.hbs.js"></script>
<script src="scripts/main.js"></script>

编译模板: cheatsheet.hbs.js

在顶线,我得到了这个:

this["JST"]["app/templates/cheatsheet.hbs"] = Handlebars.template(function (Handlebars,depth0,helpers,partials,data) {

模板inflater: main.js

为了扩充我编译的模板我正在使用这个:

var compiledTemplate = Handlebars.templates['cheatsheet.hbs'];

题

那么这个Handlebars.templates数组的问题是什么？为什么不创建？如何创建它？

更多信息

我创造了一个要点,以保持完整Gruntfile.js和cheatsheet.hbs.js.

Answer 1

阅读有关预编译器用法的部分后:

如果使用预编译器的正常模式,则生成的模板将使用相对模板名称存储到Handlebars.templates对象,而不是扩展名.可以以与模板相同的方式执行这些模板.

我继续调试编译模板.

调试

手动编译

当我安装handlebars全局时,我可以手动运行编译模板.这还不够,我不得不更新实时文件:

handlebars ./app/templates/cheatsheet.hbs -f ./app/scripts/cheatsheet.hbs.js # compile
cp ./app/scripts/cheatsheet.hbs.js ./.tmp/scripts/cheatsheet.hbs.js # update .tmp's template

与什么grunt输出相比

我看到编译模板不同,模板引用不会出现在同一个变量中.

手动编译与Grunt编译

- (function() {
-    var template = Handlebars.template, templates = Handlebars.templates = Handlebars.templates || {};
- templates['cheatsheet.hbs'] = template(function (Handlebars,depth0,helpers,partials,data) {
+ this["JST"] = this["JST"] || {};
+ 
+ this["JST"]["cheatsheet.hbs"] = Handlebars.template(function (Handlebars,depth0,helpers,partials,data) {

所以我去完成了我的任务并看到了

namespace: 'CHSH.Templates'

所以我阅读了关于命名空间的文档,而我没有使用正确的命名空间main.js

解

步骤1:更新包

全球第一:

sudo npm update handlebars -g

然后在当地

bower update

我得到了一些关于把手的消息,但没有阻止:

请注意,需要handlebars.js~1.0.11

解析为handlebars.js v1.0.0,它匹配项目的component.json中定义的需求.可能会发生冲突.

第二步:更新 Gruntfile.js

1. 我将命名空间设置为CHSH.Templates(cf. doc about namespace);
2. 我更新了files将*.hbs模板从app/templates目录编译到.tmp/scripts/和 app/scripts目录的选项;

handlebars: {
    compile: {
        options: {
            namespace: 'CHSH.Templates'
        },
        files: [{
            expand: true,
            cwd: '<%= yeoman.app %>/templates',
            src: '*.hbs',
            dest: '<%= yeoman.app %>/scripts/',
            ext: '.hbs.js'
        },
        {
            expand: true,
            cwd: '<%= yeoman.app %>/templates',
            src: '*.hbs',
            dest: '.tmp/scripts/',
            ext: '.hbs.js'
        }
        ]
    }
}

我还编辑了watch任务照顾scripts/{,*/}*.js.

第3步:更新 main.js

然后我更新了命名空间以匹配我在我的声明 Gruntfile.js

-    var compiledTemplate = Handlebars.templates['cheatsheet.hbs'];
+    var compiledTemplate = CHSH.Templates['app/templates/cheatsheet.hbs'];