I have started looking into Backbone.js and I seem to be having trouble figuring out how to implement a highlight mode for incomplete events in a todo list.
Each todo item has a checkbox that maps to its models completed attribute.
I have a button called Highlight Incomplete which I wanted to add a class to each item’s li of which its model’s completed attribute is false. I wanted it to toggle this mode, so one click highlights them and the next click removed all highlighting.
I wrote a filter on the model’s collection to return these incomplete items. I thought I could use this, but I got stuck trying to figure it out.
I didn’t want to add another attribute called highlighted to the model as it can be inferred from its completed attribute and it would only exist for its visual representation.
It should also be live, so if you have highlight mode on and add some new elements, they should be highlighted.
How can I do this?
If you structure your CSS to match your html heirarchy, and have your model states constantly updated, you won’t have to worry about syncing issues: http://jsfiddle.net/PnSPH/5
This fiddle handles the check box state: http://jsfiddle.net/PnSPH/6/
An alternative would be to stick with just having
.render(), but have the template handle theclassandcheckedstatus