Marionette - Data across multiple views with controllers - marionette

Question

I am having some trouble figuring out how to setup "controller" wide data. Here is my controller code:
Mod.Controller = Marionette.Controller.extend({
region: App.layout.mainRegion,
initialize: function(){
var self = this;
this.layout = new SomeLayout();
this.collection = new SomeCollection();
$.when(this.collection.fetch()).done(function(){
self.region.show(self.layout);
});
},
index: function(opts){
var v = new Mod.ViewOne();
this.layout.mainRegion.show(v);
},
overview: function(opts){
var v = new Mod.ViewTwo();
this.layout.mainRegion.show(v);
},
onClose: function(){
this.layout.close();
}
});
The problem is, the view functions (index and overview) are being called before the collection has finished fetching, so the layout is being displayed empty.
I'd rather not have to fetch the data in each view function, since it'll hit the database unnecessary. Short of having some nasty if statement boilerplate in each view function, is there any other way I can achieve this?

Answer 1

The problem is your routes are being triggered before your collection is fully fetched.
I can think of two ways to get around this,
Options 1: Don't start your router until your collection is fetched.
this will work if this is your only controller, if you have other controller this solution could become more complicated.
initialize: function(){
var self = this;
this.layout = new SomeLayout();
this.collection = new SomeCollection();
$.when(this.collection.fetch()).done(function(){
self.region.show(self.layout);
Backbone.history.start();
});
},
Options 2: Make your routes aware of the fetch call
you could store the promise from the collection.fetch call and use that in your controller functions. I prefer this method since it's more flexible.
initialize: function(){
var self = this;
this.layout = new SomeLayout();
this.collection = new SomeCollection();
this.collectionPromise = this.collection.fetch();
this.collectionPromise.done(function(){
self.region.show(self.layout);
});
},
index: function(opts){
var self = this;
this.collectionPromise.done(function(){
var v = new Mod.ViewOne();
self.layout.mainRegion.show(v);
});
}