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