3

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

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

车把.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) {

模板充气机：main.js

为了膨胀我编译的模板，我正在使用这个：

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

问题

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

更多信息

我创建了一个要点来保存完整的Gruntfile.js和cheatsheet.hbs.js.

4

1 回答 1

5

阅读有关预编译器使用的部分后：

如果使用预编译器的正常模式，生成的模板将使用相对模板名称存储到 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中定义的需求。可能会发生冲突。

步骤#2：更新Gruntfile.js

  1. 我将命名空间设置为CHSH.Templates（参见关于命名空间的文档）；
  2. 我更新了将模板从目录files编译到和 目录的选项；*.hbsapp/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'];
于 2013-06-18T12:24:08.157 回答