Handlebars: TypeError: Невозможно прочитать свойство 'helperMissing' из неопределенного

Question

У меня проблема с скомпилированными шаблонами Handlebars. Я чувствую, что полностью упускаю что-то важное, но, как ни старайся, я не могу решить это или найти какую-либо информацию в Интернете о том, почему эта конкретная ситуация проявляется.

Я компилирую, используя задачу Gulp, используя gulp-handlebars. Задача глотка:

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 функция в документации руля...

Любое понимание того, почему это может происходить, будет очень кстати!

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 вызовы необходимы для проверки правильности скомпилированного кода (который отличается от информации на сайте руля - gulp-handlebars модуль просто работает немного странным образом).

Наконец то insert добавляет требование вызова, чтобы убедиться, что он работает автономно, чтобы обеспечить Handlebars зависимость встречается во время выполнения.

Наконец, в моем шаблоне произошла ошибка, которая должна была выглядеть так:

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

отсутствующий второй параметр gravatar хелпер вызвал ошибку - это появилось только после того, как скомпилированные шаблоны работали, но на этом этапе было легко обнаружить!