2012-04-03 111 views
0

我是新來的Handlebars,雖然我找到了解決方法,但我想知道爲什麼一個註冊助手工作,一個不工作。這個不起作用的例子是HB文檔中的一個例子。Handlebars EACH迭代器錯誤

HTML:

<ul class="global-nav clearfix"> 
    {{#each data}} 
<li><a href="{{href}}">{{text}}</a></li> 
{{/each}} 
</ul> 
... 
<ul class="content-nav clearfix"> 
    {{#each data}} 
    <li><a href="{{href}}">{{text}}</a></li> 
    {{/each}} 
</ul> 

數據:

var nav = [ 
    { 
    name: 'global', 
    selector: $('.global-nav'), 
    data: [ 
     { 
     text: 'Page 1', 
     href: 'page1.html' 
     }, { 
     text: 'Page 2', 
     href: 'page2.html' 
     } 
    ], 

    name: 'content', 
    selector: $('.content-nav'), 
    data: [ 
     { 
     text: 'Section 1', 
     href: '#section1' 
     }, { 
     text: 'Section 2', 
     href: '#section2' 
     } 
    ] 
    } 
]; 

編譯:

$.each(nav, function() { 
    var obj = this, 
     src = obj.selector.html(), 
     template = Handlebars.compile(src), 
     html = template(obj.data); 

    obj.selector.html(html); 
}); 

HB助手(不工作 - 方面是不確定的):

Handlebars.registerHelper('each', function(context, options) { 
    var ret = ""; 

    for(var i=0, j=context.length; i<j; i++) { 
    ret = ret + options.fn(context[i]); 
    } 

    return ret; 
}); 

HB助手(不使用的this代替上下文工作):

Handlebars.registerHelper('each', function(context, options) { 
    var ret = ""; 

    for(var i=0, j=this.length; i<j; i++) { 
    ret = ret + options.fn(this[i]); 
    } 

    return ret; 
}); 

任何有助於理解。

回答

0

在查看其餘的JS之前,我可以指出JSON看起來不對。

名稱,選擇器和數據在它們出現在JSON中的第二次被覆蓋。如果這只是因爲粘貼到的話,那麼就不理我,當被省略了一些位; O)

但如果真正的JSON,那麼它需要改變看的任何功能性的東西

<script> 
var nav = [ 
{ 
    name: 'global', 
    selector: $('.global-nav'), 
    data: [ 
    { 
     text: 'Page 1', 
     href: 'page1.html' 
    }, { 
     text: 'Page 2', 
     href: 'page2.html' 
    } 
    ] 
}, // this line 
{ // and this line added 
    name: 'content', 
    selector: $('.content-nav'), 
    data: [ 
    { 
     text: 'Section 1', 
     href: '#section1' 
    }, { 
     text: 'Section 2', 
     href: '#section2' 
    } 
    ] 
} 
]; 
</script>