How to add/remove class to array of objects in Ember JS - ember.js

Question

I try to learn Ember JS. And i can not find answer for my question . I have template
<script type="text/x-handlebars">
<table class="table">
{{#each App.todoListController}}
{{#view App.ViewTable todoBinding="this"}}
<td>{{title}}</td>
<td><a href="javascrpt:" {{action "deleteTodo" target="view"}}>X</a></td>
{{/view}}
{{/each}}
</table>
<button {{action "deleteTodo" target="App.todoListController"}}>Delete</button>
</div>
</script>
In app.js I have Controller and View :
/*******************
Controller
*******************/
App.todoListController = Em.ArrayController.create({
content : [],
createTodo : function(title) {
var todo = App.Todo.create({title:title})
this.pushObject(todo)
}
});
/*******************
View
*******************/
App.ViewTable = Em.View.extend({
tagName : 'tr',
classNameBindings : ['isHover:hover'],
isHover : false,
todo : null,
deleteTodo : function(){
var tr = this.get('todo');
App.todoListController.removeObject(tr);
},
click : function()
{
this.set('isHover',true);
}
})`
When i clicked to row of table , it changed class to "hover" . Now question : I can't remove class "hover" from all objects (it is necessary for only one object can be selected)
PS : Sorry for my English and sorry for the formatting.

Answer 1

One way to do this would be to move the "isHover" property to the "todo" item so that you can search all the "todo" items in the controller, and set/unset the "isHover" property on them :
Rename:
App.ViewTable
to
App.TableView
Ember looks for the keyword 'View' at the end of the name.
Add a name to the items in your each statement (I used "thing"):
{{#each thing in App.todoListController}}
instead of :
{{#each App.todoListController}}
that way it's easier to make references later.
Use the name you defined above (thing in this case) for your binding (and remove the quotes):
{{#view App.TableView todoBinding=thing}}
Instead of:
{{#view App.ViewTable todoBinding="this"}}
Now your tableView will have a reference to the 'todo' that it is displaying
Move "isHover" into the Todo item's object:
App.Todo = Em.Object.extend({
title:"...",
isHover: false
});
Bind "isHover" in your table view:
....
tagName : 'tr',
isHoverBinding: 'this.todo.isHover',//this should be before your classNameBindings
classNameBindings : ['isHover:hover'],
...
Now change your 'click' function to:
click : function() {
//Get a list of the other hovered items from the controller:
var otherHoveredItems = App.todoListController.get('content').filterProperty('isHover', true);
//Iterate each hovered item and set hover to false
for ( var i = 0; i < otherHoveredItems.length; i++) {
otherHoveredItems[i].set('isHover', false);
}
//set this item to hover
this.get('todo').set('isHover', true);
}
Here's a fiddle example: http://jsfiddle.net/amindunited/kY4nh/
Another method, would be to move your {{#each}} into a collectionView. The handlebars {{each}} is a collectionView, so this wouldn't be a big jump. One caveat is that the click method alone won't give you the context, BUT if you wrap the click function in an eventManager, you will get the view as the second reference...sounds messy, but it's actually tidier: http://jsfiddle.net/amindunited/5hNSZ/