Initializing nested collections with Backbone

Question

I am trying to nest a Collection View into a Model View.

In order to do so, I used Backbone's Marionnette Composite View and followed that tutorial

At the end he initializes the nested collection view like this:

MyApp.addInitializer(function(options){
  var heroes = new Heroes(options.heroes);

  // each hero's villains must be a backbone collection
  // we initialize them here
  heroes.each(function(hero){
    var villains = hero.get('villains');
    var villainCollection = new Villains(villains);
    hero.set('villains', villainCollection);
  });

  // edited for brevity

});

How would you go doing the same without using the addInitalizer from Marionette?

In my project I am fectching data from the server. And when I try doing something like:

App.candidatures = new App.Collections.Candidatures;

 App.candidatures.fetch({reset: true}).done(function() {
    App.candidatures.each(function(candidature) {
        var contacts = candidature.get('contacts');
        var contactCollection = new App.Collections.Contacts(contacts);
        candidature.set('contacts', contactCollection);
    });
    new App.Views.App({collection: App.candidatures});


 });

I get an "indefined options" coming from the collection:

App.Collections.Contacts = Backbone.Collection.extend({
model: App.Models.Contact,

initialize:function(models, options) {
    this.candidature = options.candidature;
},


url:function() {
    return this.candidature.url() + "/contacts";
}
)};

Answer 1

That's because when you're creating the contactCollection, you're not providing a candidatures collections in an options object. You do need to modify your contact collection initialization code to something like:

initialize:function(models, options) {
    this.candidature = options && options.candidature;
}

That way the candidature attribute will be set to the provided value (and if not provided, it will be undefined).

Then, you still need to provide the info when you're instanciating the collection:

App.candidatures.each(function(candidature) {
    var contacts = candidature.get('contacts');
    var contactCollection = new App.Collections.Contacts(contacts, {
        candidature: candidature
    });
    candidature.set('contacts', contactCollection);
});

P.S.: I hope you found my blog post useful!