Handlebars：TypeError：無法讀取undefined屬性'helperMissing'

Question

我遇到了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....' 
})); 

當我運行代碼I得到的錯誤：

TypeError: Cannot read property 'helperMissing' of undefined 

裏面涉及到編譯模板代碼：

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

我似乎無法找到任何原因的代碼被添加，或者到helperMissing功能的任何引用把手文件...

任何有關爲什麼這可能會發生的見解將非常歡迎！

Answer 1

最後，問題變成了衝突版本！

我結束了修復它是改變一飲而盡文件一點點的方式：

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添加了require調用以確保它以獨立方式工作，以確保在運行時滿足Handlebars依賴關係。

最後，在我的模板中的錯誤，應改爲：

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

到gravatar助手缺少第二個參數導致了錯誤 - 這只是提出了自己一次編譯模板進行工作，但很容易在這一點上發現！