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:
Renamed Collection's "update" to set, for parallelism with the similar model.set(), and contrast with reset. It's now the default updating mechanism after a fetch. If you'd like to continue using "reset", pass
{reset: true}
So, to trigger a reset event, you now have to use
this.collection.fetch({reset: true})
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With