So after a lot of googling, reading and testing I've landed up doing the following. I dont think this is optimal as we're forcing backbone to run its reset event, which seems to be the way its being done in most example apps, though I feel like this is ignoring the fact that the default behavior was changed, surely this was for a reason?
Ultimately this works currently, but I would be super excited to see an alternative.
/*Collection view
- - - - - - -*/
App.Views.Contacts = Backbone.View.extend({
tagName: 'tbody',
initialize: function() {
this.listenTo(this.collection, 'add', this.addOne);
this.listenTo(this.collection, 'reset', this.addAll);
this.listenTo(this.collection, 'all', this.render);
this.collection.fetch({reset:true});
},
render: function() {
// append the list view to the DOM
$('#allcontacts').append(this.el);
return this;
},
addAll : function() {
this.collection.each( this.addOne, this);
},
addOne: function(model) {
var contactView = new App.Views.Contact({ model: model});
this.$el.append(contactView.render().el);
}
});
I have this utility, which I've added the call to render back into :
var ViewManager = {
currentView : null,
showView : function(view) {
if (this.currentView !== null && this.currentView.cid != view.cid) {
this.currentView.remove();
}
this.currentView = view;
return view.render();
}
}
in my router I call this on the list route :
list: function() {
console.log('backbone loading list route');
var AllContactsView = new App.Views.Contacts({ //init method runs now
collection : App.contacts
});
ViewManager.showView(AllContactsView);
},
As I said I feel like there may be a minor issue or two with this but it currently works in my app, and I'll come back to it at a later stage again undoubtably.