BackboneJS - Calling multiple collections with Handlebars.js

Question

How do I fetch and display several backbone collections using Handlebars.js? I created 4 json files, each of them are assigned to their own collection and model.

In my router I have in the initialize:

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

then i defined in the routes, when you click a specific link you will be redirected to a certain page:

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

and my HTML file is:

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

and in my Backbone View i have:

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

I dont know what it is, but it shows me the html template 4 times and without any content?!?!

Answer 1

I'm not really sure I understood what you're trying to do. Since my solution would be trivial. I would make the template like this:

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

And render it with:

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