Shared Collections Between Modules

Question

The problem.

I have a set of modules that need to share the same collections.

The collections need to be ready before the modules are started.

I'm not sure how to solve this in the cleanest way, and i realize that this might vary from project to project, but here is some thoughts.

Loading the collections before start up.

This is the first thing that comes to my mind, simply load the collection just before i call the "App.start()".

Then I can just make it accessible in the global scope (not sure i like this.).

Delaying sub-modules start-up until load.

If I structure the app so it has a main module, that is responsible for starting up all sub modules.

Then I could pre-load all vital data, and make sure it was ready, before starting any sub modules.

Then maybe make it accessible through the main modules API.

I don't know if this is poor design, sins my experience with marionette is limited.

How I'm doing it now.

Atm I have choose to load the collections before "App.start()", this made sens sins I'm also pre-loading my templates.

I have introduced a 'static' object called 'CollectionManager', that acts as a proxy/Access point for my collections. And will be globally available.

Application setup:

// Templates that should be ready on start up
var arrTemplatesPaths = [...]; 

// Collections that i need to be ready and shared between modules.     
var arrSharedCollections = [
  {id:"groups", collection: GroupCollection}
];

// Preloading the vital data.
$.when.apply(null, [
  Templates.fetch(arrTemplatesPaths),  
  CollectionManager.fetch(arrSharedCollections)
])
.then(function(){
    App.start();
})

Access:

Then the modules that need access to the collection can just call CollectionManager.get( id )

var collection = CollectionManager.get("groups"); //@return Backbone.Collection

This provide some structure, but im not sure i like it all that much.

Update

So after digging a little in the Marionette doc i noticed the Marionette.RequestResponse.

That provides a clean way to request data from within modules, creating a level of abstractions over my approach, that coupled things in a annoying way.

So I have added this line to the application:

App.reqres.addHandler("getCollection", function (id) {
    return CollectionManager.get(id);
})

Then from within the modules i access the collections this way:

var collection = App.request("getCollection", "groups")

I like this way more then accessing the CollectionManager directly from within the modules.

Answer 1

On the topic of loading Collections/Models before or after showing Views, I have found that the best approach is to fetch the Model/Collection in a Marionette Controller, then show the View, passing in the model/collection once it has been fetched. Looks like this:

Controller (or Router)

showUser: function(id) {
   var userModel = new UserModel({id: id});
   userModel.fetch().then(function() {
      mainRegion.show(new UserView({model: userModel}));
   });
}