Monday, May 20, 2024
 Popular · Latest · Hot · Upcoming
99
rated 0 times [  106] [ 7]  / answers: 1 / hits: 18211  / 13 Years ago, fri, september 16, 2011, 12:00:00

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!


More From » backbone.js

 Answers
19

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.


[#90067] Thursday, September 15, 2011, 13 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
turnerf

Total Points: 620
Total Questions: 101
Total Answers: 109

Location: French Polynesia
Member since Tue, Jul 7, 2020
4 Years ago
turnerf questions
;