Updating changed attributes with backbone.js

Question

So I'm setting a model with updated attributes.

Then in my view I'm listening for a change event for this model.

When that fires I think I should use model.changedAttributes? Do I pass it a callback?

It should return a hash of all the attributes that are updated, or new? Is there anyway to know which are updated and which are new?

How should I go about updating once I have this hash of changed attributes? Parse the object to type of attribute or should I just use higher resolution listeners from the get go?

Thanks!

Answer 1

If your view is only showing a single attribute - for example, if it's a checkbox showing some boolean attribute of your model - you should listen to the 'change:attribute_name' event for that attribute, as described in the Backbone docs.

If your view is more complex and relies on multiple model attributes - for example if it's a view for "To Do" list item that has "done", "text", and "dueDate" elements, then listen for the 'change' event. In this case, you can either either choose to update all of the elements on each event, or you can use changedAttributes() to determine which elements need updating.

To illustrate ...

Update attributes using 'change:attribute_name' events:

This style works well for simple views where the number of model attributes being rendered is < 3 or so. More than that and the code gets a bit cumbersome.

model.bind('change:done', function() {
    view.doneElement.checked = model.get('done');
});
model.bind('change:text', function() {
    view.textElement.value = model.get('text');
});
model.bind('change:dueDate', function() {
    view.dueDateElement.value = model.get('dueDate');
});

Update everything on 'change' events:

This style works well for complex views that render 4 or more attributes (the 3/4 attribute count is just a rough guideline, based mostly on my personal opinion).

model.bind('change', function() {
    view.doneElement.checked = model.get('done');
    view.textElement.value = model.get('text');
    view.dueDateElement.value = model.get('dueDate');
});

The downside to this is that for any change, every element of the view is updated. So, for example, if a person marks a todo item as "done", the text will be re-rendered, possibly losing whatever selection they may have had there. Sometimes that sort of thing is an issue, sometimes it isn't - you'll have to decide based on what exactly your view is doing.

Update only what's changed since the last 'change' event:

This is the more nuanced variation of the above, and combines the best of both approaches. It updates the view elements that need updating based on the changedAttributes() results.

model.bind('change', function() {
  var diff = model.changedAttributes();
  for (var att in diff) {
    switch(att) {
      case 'done':
        view.doneElement.checked = model.get('done');
        break;
      case 'text':
        view.textElement.value = model.get('text');
        break;
      case 'dueDate':
        view.dueDateElement.value = model.get('dueDate');
        break;
    }
  }
});

Finally, I'll note that there's yet another variation on this that involves having the view store a hash of what values it's displaying, and passing that into the changedAttributes() method. That's typically not necessary, so I won't bore you with the details here.