I'm using a layout's 'initialize' method to instantiate a collection, fetch() data from a url on that collection, and then instantiate a new collectionView passing through the collection with it's fetched data. The collectionView later gets 'shown' in a region.
It works perfectly.
I wanted to switch over to using localStorage to retrieve the data, instead of from a remote url. So I saved the data retrieved from remote url into localStorage. I then updated the collection with the 'localStorage: new Backbone.LocalStorage('entries')'. Now it successfully retrieves the data from localStorage. But. None of the regions in the layout get rendered (i've tried calling this.render() in various places with no luck).
If I replace the 'initialize' method to 'onRender' in the layout which is responsible for instantiating everything, then it renders perfectly (regardless of whether it came from remote url or localStorage).
Why would it be that if i use the layout's 'initialize' method to fetch data in a collection from localStorage, then nothing gets rendered; whereas it does get rendered if that data is fetched from remote Url? why does both work when using the 'onRender' method?
Some code for reference:
var EntriesCollection = Backbone.Collection.extend({
model: EntryModel,
url: '/api/entries',
localStorage: new Backbone.LocalStorage('entries')
});
return EntriesLayout = Marionette.Layout.extend({
...
// Below, if I use onRender everything works, if I change to 'initialize' then
// it works only when data is loaded via remote url, not localStorage. (the collection
// is successfully populated with data in both cases.)
onRender: function() {
...
this.entries_collection = new EntriesCollection();
var self = this;
this.entries_collection.fetch().done(function() {
/*
self.entries_collection.localStorage = new Backbone.LocalStorage('entries');
self.entries_collection.each(function(model) {
model.save();
});
*/
self.entries_list = new EntriesList({collection: self.entries_collection});
self.collectionSynced();
});
},
collectionSynced: function() {
this.columnRight.show(this.voting_intro);
this.collectionList.show(this.entries_list);
this.listenTo(this.voting_intro, 'start:clicked', function() {
this.displayEntry(0);
});
},
...
I'm using Marionette's Layout, CollectionView, ItemView's etc, not sure how critical that is to the question.
