BackboneJS-使用Handlebars.js調用多個集合

Question

如何使用Handlebars.js來獲取和顯示幾個骨干集合？ 我創建了4個json文件，每個文件都分配了自己的集合和模型。

在我的路由器中，我具有初始化：

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;
}

我不知道它是什么，但是它向我顯示了html模板4次，並且沒有任何內容？！？！

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;
}