BackboneJS - 使用Handlebars.js调用多个集合

Question

如何使用Handlebars.js获取并显示多个骨干集合？我创建了4个json文件，每个文件都分配给他们自己的集合和模型。

在我的路由器我在initialize：

initialize: function() { 
    this.allcategoryMenuCollection = new AllCategoryMenuCollection(); 
    this.natcategoryMenuCollection = new NatCategoryMenuCollection(); 
    this.intcategoryMenuCollection = new IntCategoryMenuCollection(); 
    this.topcategoryMenuCollection = new TopCategoryMenuCollection(); 
} 

然后我在路由定义，当你点击你将被重定向到某个页面的特定链接：

newpage: function() { 

this.artistpageLeftMenuView = new ArtistpageLeftMenuView({el:'#leftMenu'}); 
this.artistpageLeftMenuView.collections = { 
    allcategoryMenuCollection: this.allcategoryMenuCollection, 
    natcategoryMenuCollection: this.natcategoryMenuCollection, 
    intcategoryMenuCollection: this.intcategoryMenuCollection, 
    topcategoryMenuCollection: this.topcategoryMenuCollection 
}; 
this.artistpageLeftMenuView.render(); 
} 

和我的HTML文件是：

<ul class="sbm2"> 
    {{categoryAll}} 
    {{#each .}} 
    <li> 
     <a href="{{this.url}}">{{this.name}}</a> 
    </li> 
    {{/each}} 
</ul> 

<ul class="sbm2"> 
    {{categoryNat}} 
    {{#each .}} 
    <li> 
     <a href="{{this.url}}">{{this.name}}</a> 
    </li> 
    {{/each}} 
</ul> 

<ul class="sbm2"> 
    {{categoryAll}} 
    {{#each .}} 
    <li> 
     <a href="{{this.url}}">{{this.name}}</a> 
    </li> 
    {{/each}} 
</ul> 

<ul class="sbm2"> 
    {{top100}} 
    {{#each .}} 
    <li> 
     <a href="{{this.url}}">{{this.name}}</a> 
    </li> 
    {{/each}} 
</ul> 

和在我的骨干查看我有：

render: function() { 
    $(this.el).html(this.template({categoryAll:this.collections.allcategoryMenuCollection.toJSON()})); 
    $(this.el).append(this.template({top100:this.collections.topcategoryMenuCollection.toJSON()})); 
    $(this.el).append(this.template({categoryNat:this.collections.natcategoryMenuCollection.toJSON()})); 
    $(this.el).append(this.template({categoryInt:this.collections.intcategoryMenuCollection.toJSON()})); 
    return this; 
} 

我不知道它是什么，但它显示了我4次html模板，没有任何内容？！？！

Answer 1

我不太确定我明白你想要做什么。由于我的解决方案将是微不足道的。 我会做这样的模板：

<ul class="sbm2"> 
    {{#each allcategoryMenuCollection}} 
    <li> 
     <a href="{{this.url}}">{{this.name}}</a> 
    </li> 
    {{/each}} 
</ul> 
    <ul class="sbm2"> 
    {{#each natcategoryMenuCollection}} 
    <li> 
     <a href="{{this.url}}">{{this.name}}</a> 
    </li> 
    {{/each}} 
</ul> 

<ul class="sbm2"> 
    {{#each intcategoryMenuCollection}} 
    <li> 
     <a href="{{this.url}}">{{this.name}}</a> 
    </li> 
    {{/each}} 
</ul> 

<ul class="sbm2"> 
    {{#each topcategoryMenuCollection}} 
    <li> 
     <a href="{{this.url}}">{{this.name}}</a> 
    </li> 
    {{/each}} 
</ul> 

而且具有使其：

render: function() { 
    $(this.el).html(this.template(this.collections.toJSON())); 
    return this; 
}