Handlebars: TypeError: Cannot read property 'helperMissing' of undefined

Question

我在使用 Handlebars 编译模板时遇到问题。我觉得我完全遗漏了一些重要的东西，但尽我所能，我似乎无法解决这个问题，也无法在网上找到任何关于为什么会出现这种特殊情况的信息。

我正在使用 gulp-handlebars 使用 Gulp 任务进行编译。 gulp 任务是：

gulp.task('build-hbs', function(){
  gulp.src('root/app/src/hbs/*.hbs')
  .pipe(handlebars())
  .on('error', notify.onError({
    message: 'Error: <%= error.message %>'
  }))
  .pipe(declare({
    namespace: 'Handlebars.templates',
    noRedeclare: true // Avoid duplicate declarations
  }))
  .pipe(concat('templates.js'))
  .pipe(gulp.dest('root/app/js/templates/'));
});

对于简单的模板，一切正常，但是我现在正在尝试使用一个简单的助手（注意：在使用未编译的模板时，助手可以正常工作）。帮手是：

Handlebars.registerHelper('gravatar', function(hash, size) {
  var grav = '<img src="http://www.gravatar.com/avatar/' + hash + '.jpg?r=g&d=mm&s=' + size + '">';
  return new Handlebars.SafeString(grav);
});

模板本身如下所示：

<div id="nick"><b>{{display}}</b></div>
<div id="image">{{gravatar hash}}</div>

编译后，我得到：

this["Handlebars"] = this["Handlebars"] || {};
this["Handlebars"]["templates"] = this["Handlebars"]["templates"] || {};
this["Handlebars"]["templates"]["profile"] = {"compiler":[6,">= 2.0.0-beta.1"],"main":function(depth0,helpers,partials,data) {
    var helper, alias1=helpers.helperMissing, alias2="function", alias3=this.escapeExpression;

  return "<div id=\"nick\">\r\n  <b>"
    + alias3(((helper = (helper = helpers.display || (depth0 != null ? depth0.display : depth0)) != null ? helper : alias1),(typeof helper === alias2 ? helper.call(depth0,{"name":"display","hash":{},"data":data}) : helper)))
    + "</b>\r\n</div>\r\n<div id=\"image\">\r\n  <img src=\"http://www.gravatar.com/avatar/"
    + alias3(((helper = (helper = helpers.hash || (depth0 != null ? depth0.hash : depth0)) != null ? helper : alias1),(typeof helper === alias2 ? helper.call(depth0,{"name":"hash","hash":{},"data":data}) : helper)))
    + "?s=32\">\r\n</div>";
},"useData":true};

在我的 JS 代码中，我做了类似的事情：

$('#profile').html(Handlebars.templates.profile({
    display:'user 1',
    hash:'abdcef....'
}));

当我运行代码时出现错误：

TypeError: Cannot read property 'helperMissing' of undefined

其中涉及编译好的模板代码：

...
var helper, alias1=helpers.helperMissing, alias2="function", alias3=this.escapeExpression;
...

我似乎找不到添加此代码的任何原因，也找不到对 Handlebars 文档中 helperMissing 函数的任何引用...

非常欢迎任何关于为什么会发生这种情况的见解！

Answer 1

最后发现是版本冲突问题！

我最终修复它的方法是稍微更改 gulp 文件：

gulp.task('build-hbs', function(){
  gulp.src('root/app/src/hbs/*.hbs')
    .pipe(handlebars({
      handlebars: require('handlebars')
    }))
    .pipe(wrap('Handlebars.template(<%= contents %>)'))
    .pipe(declare({
      namespace: 'Handlebars.templates',
      noRedeclare: true // Avoid duplicate declarations
    }))
    .pipe(insert.prepend('var Handlebars = require("handlebars");\n'))
    .pipe(concat('templates.js'))
    .pipe(gulp.dest('root/app/js/templates/'));
});

gulp.task('copy', function(){
  gulp.src('node_modules/handlebars/dist/handlebars.runtime.js')
    .pipe(gulp.dest('root/app/js/libs/'));
});

主要区别在于它专门加载 npm 安装的车把版本以用作编译器。

第二个作业将 handlebars.runtime.js 文件从 node_modules 文件夹复制到浏览器实际拾取它的文件夹。这样保证了兼容性！

需要调用 wrap 和 declare 来确保编译后的代码实际上是正确的（这与 handlebars 站点上的信息不同——gulp-handlebars 模块可以正常工作以一种有点奇怪的方式）。

最后，insert 添加了一个 require 调用，以确保它以独立的方式工作，以确保在运行时满足 Handlebars 依赖性。

最后，我的模板中出现错误，应该是：

<div id="nick"><b>{{display}}</b></div>
<div id="image">{{gravatar hash 48}}</div>

gravatar 助手缺少的第二个参数导致了一个错误 - 这仅在编译的模板工作时才出现，但此时很容易发现！

Handlebars: TypeError: Cannot read property 'helperMissing' of undefined

Handlebars: TypeError: Cannot read property 'helperMissing' of undefined

javascript

templates

handlebars.js

precompiled-templates

gulp