2016-02-12 25 views
2

我很新的handlebars.js,我試着寫一個簡單的if/else助手。Handlebars定製幫手錯誤:「options.fn不是一個函數」

我用this codepen爲指導。

我已經發現你不應該在定製助手面前使用#,但我無法弄清楚爲什麼我仍然得到這個錯誤。

這是我index.html

<html> 
<head> 
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.5/handlebars.min.js"> 
    </script> 
    <script type="text/javascript" src=" 
https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.js"></script> 
    <script src="data.js"></script> 
    <script src="helper.js"></script> 
</head> 
<body> 
    <script id="entry-template" type="text/x-handlebars-template"> 
     <ul class="test"> 
      {{#each people}} 
       {{ifThird @index}} 
        <li> 
         {{firstName}} 
        </li> 
       {{else}} 
        <li> 
         {{firstName}}{{lastName}} 
        </li> 
      {{/each}} 
     </ul> 
    </div> 
    </div> 
</script> 
</body> 
</html> 

...這是​​:

$(function(){ 
    var templateScript = $("#entry-template").html(); 
    var theTemplate = Handlebars.compile(templateScript); 
    var context = { 
     people: [ 
      {firstName: "Yehuda", lastName: "Katz"}, 
      {firstName: "Carl", lastName: "Lerche"}, 
      {firstName: "Alan", lastName: "Johnson"}, 
      {firstName: "Nathan", lastName:"Klumpenaar"}, 
      {firstName: "Aart", lastName:"Klumpenaar"}, 
      {firstName: "jeroen", lastName: "van Dam"} 
     ] 
    }; 
    var html = theTemplate(context); 
    $('.test').html(html); 
    $(document.body).append(html); 
}) 

...這是helper.js(誤差應該在這裏):

Handlebars.registerHelper('ifThird', function (index, options) { 
    if(index%3 == 0){ 
     return options.fn(this); 
    } else { 
     return options.inverse(this); 
    } 
}); 
+0

data.js執行渲染嗎?如果是這樣,請確保幫手已經在那裏。 –

回答

3

你需要編輯你的模板到:

<ul class="test"> 
     {{#each people}} 
      {{#ifThird @index}} 
       <li> 
        {{firstName}} 
       </li> 
      {{else}} 
       <li> 
        {{firstName}}{{lastName}} 
       </li> 
      {{/ifThird}} 
     {{/each}} 
    </ul> 

您需要使用{{#ifThird}}開始塊並使用{{/ ifThird}}關閉塊。

相關問題