Question

I develop a jquery & backbone.js web app.
One component has an html table and behind this table is a backbone.js collection.
Any change in this collection should lead to an update of the html table, so I write

this.collection.bind("reset add remove", this.renderRows, this);    

So I update the html table, when the whole collection gets new, when a new model gets added and when a model gets removed.

There’s also a detail view component that gets called when the user hovers and clicks over a certain row of the html table. At the beginning of this component I get the right model out of the collection

changeModel = this.collection.get(id);

After the user has changed some attributes, I do

changeModel.set(attrs); 

and return to the html table. The model in the collection has the correct changed values.

But the html table is not updated as none of the 3 events (reset, add, remove) was triggered.

So I added “replace” to the collection binding

this.collection.bind("replace reset add remove", this.renderRows, this);

and before returning from the detail view I called

this.collection.trigger("replace");

My solution works, but my question is:

Is there any “native” backbone.js solution that is already there and that I have missed and where I do not have to trigger something by myself?

Answer 1

The change events from models bubble up to the collection. (Collection’s _onModelEvent -function in the annotated source. The method just basically takes all events from models and triggers them on the collection.

This leads to

1. Model attribute is set
2. Model triggers change
3. Collection catches change
4. Collection triggers change

So

this.collection.bind("replace reset add remove", this.renderRows, this); 

has to be replaced with this

this.collection.bind("change reset add remove", this.renderRows, this);

P.S.

My personal opinion is that you shouldn’t redraw the whole table if just one model is changed. Instead make each table row a view in itself that has the corresponding model as its model and then react to attribute changes there. There is no point in redrawing 500 table cells if you’re targeting just one.

UPDATE

And nowadays you should use the on -method for binding to events.

collection.on("change reset add remove", this.renderRows, this);

If you’re using BB 1.0, and this event is being listened to within a View, I suggest moving to use the new listenTo to bind into events, which also allows for easy unbinding when calling view.remove(). In that case you should do:

// assuming this is the view
this.listenTo(collection, "change reset add remove", this.renderRows);