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

i try learn ember js. , can not find answer question . 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 have controller , 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 clicked row of table , changed class "hover" . question : can't remove class "hover" objects (it necessary 1 object can selected)

ps : sorry english , sorry formatting.

one way move "ishover" property "todo" item can search "todo" items in controller, , set/unset "ishover" property on them :

1. rename:

   app.viewtable  

   to

   app.tableview 

   ember looks keyword 'view' @ end of name.

2. add name items in each statement (i used "thing"):

   {{#each thing in app.todolistcontroller}} 

   instead of :

   {{#each app.todolistcontroller}} 

   that way it's easier make references later.

3. use name defined above (thing in case) binding (and remove quotes):

   {{#view app.tableview todobinding=thing}} 

   instead of:

   {{#view app.viewtable todobinding="this"}} 

   now tableview have reference 'todo' displaying

4. move "ishover" todo item's object:

   app.todo = em.object.extend({     title:"...",     ishover: false }); 

5. bind "ishover" in table view:

   .... tagname : 'tr', ishoverbinding: 'this.todo.ishover',//this should before classnamebindings classnamebindings : ['ishover:hover'], ... 

6. now change 'click' function to:

   click : function() {      //get list of other hovered items controller:     var otherhovereditems = app.todolistcontroller.get('content').filterproperty('ishover', true);      //iterate each hovered item , set hover false     ( var = 0; < otherhovereditems.length; i++) {         otherhovereditems[i].set('ishover', false);     }      //set item hover     this.get('todo').set('ishover', true); } 

here's fiddle example: http://jsfiddle.net/amindunited/ky4nh/

another method, move {{#each}} collectionview. handlebars {{each}} collectionview, wouldn't big jump. 1 caveat click method alone won't give context, if wrap click function in eventmanager, view second reference...sounds messy, it's tidier: http://jsfiddle.net/amindunited/5hnsz/