This is my view for a collection
var mssg = mssg || {};
mssg.MessagesView = Backbone.View.extend({
el: '#messages',
initialize: function() {
this.collection.fetch();
this.collection.bind('reset', this.render, this);
},
render : function() {
this.$el.html('');
this.collection.each(function( item ) {
this.renderMessage( item );
}, this );
return this;
},
renderMessage : function( item ) {
var messageView = new mssg.MessageView({
model : item
});
this.$el.append( messageView.render().el );
}
});
this is the collection
var mssg = mssg || {};
mssg.Messages = Backbone.Collection.extend({
model : mssg.Message,
url : 'messages'
});
and this is how it is initialized:
var mssg = mssg || {};
$(function() {
new mssg.MessagesView({
collection : new mssg.Messages()
});
});
The problem is that the render
function bound to reset
doesn't fire after the ajax fetch request.
If I bind it to add
it works.
I tried binding all
to a debuggin function and it says that the sync
event is called alongside the add
for every item.
If you check backbone change log, you'll see that the way fetch is handled changed in 1.0:
So, to trigger a reset event, you now have to use
in backbone 1.0, you have to trigger reset by hand: