TypeError:未定义Handlebars.templates

Question

我正在使用yeoman、gruntjs和handlebars.js，但我的模板不再加载，firebug中出现以下错误：

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文件

我正在导入handlebars、模板和脚本以使其膨胀：

<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) {

模板充气：main.js

为了使我的编译后的模板膨胀，我使用了以下代码：

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

问题

那么Handlebars.templates数组是怎么回事呢？为什么没有创建？如何创建？

更多信息

我创建了一个gist to hold the full Gruntfile.js and cheatsheet.hbs.js。

Answer 1

在阅读了section on precompiler usage之后

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

我继续调试编译后的模板。

调试

手工编译

当我安装handlebars global时，我可以手动运行编译模板。这还不够，我必须更新实时文件：

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'

因此，我读取了doc about namespace，但在main.js中没有使用正确的名称空间

解决方案

第1步:更新包

全球第一：

sudo npm update handlebars -g

然后在本地

bower update

我收到了一些关于车把的消息，但没有阻塞：

请注意，这需要handlebars.js ~1.0.11

解析到handlebars.js v1.0.0，符合项目component.json中定义的需求。可能会发生冲突。

第2步:更新Gruntfile.js

1. I将名称空间设置为CHSH.Templates (参见doc about namespace)；
2. 我更新了files选项，以便将*.hbs模板从app/templates目录编译到.tmp/scripts/和app/scripts from

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

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

第3步:更新main.js

然后，我更新了名称空间以匹配我在Gruntfile.js中声明的内容

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