1

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

我正在使用 gulp-handlebars 使用 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;
...

我似乎找不到添加此代码的任何理由，或者helperMissing在 Handlebars 文档中找不到对该函数的任何引用...

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

4

1 回答 1

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需要anddeclare调用来确保编译的代码实际上是正确的（这与车把网站上的信息不同 - 该模块gulp-handlebars只是以一种有点奇怪的方式工作）。

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

最后，我的模板中有一个错误，应该是：

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

辅助函数缺少的第二个参数gravatar导致了一个错误——这只会在编译的模板工作时出现，但此时很容易发现！

于 2016-02-16T19:06:02.940 回答