2016-02-12 23 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}}关闭块。

相关问题