StackO 16550623

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0-rc.4/handlebars.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ember.js/1.0.0-rc.4/ember.min.js"></script>
<script type="text/x-handlebars" data-template-name="application">
      <table class="table">
         {{#each thing in App.todoListController}}
            {{#view App.TableView todoBinding=thing}}
               <td>{{thing.title}}</td>
               <td><a {{action deleteTodo target="view"}} >X</a> </td>
            {{/view}}
         {{/each}}
       </table>
       <button {{action deleteTodo target="App.todoListController"}}>Delete</button>
</script>

CSS

.hover {
    background-color: yellow;
}

JavaScript

window.App = Em.Application.create();
App.ApplicationController = Em.Controller.extend();
App.ApplicationView = Em.View.extend();


/*******************
        Controller
*******************/
App.Todo = Em.Object.extend({
    title:"...",
    isHover: false
});

App.todoListController = Em.ArrayController.create({
    content:[],   
    createTodo : function(title) {
       var todo = App.Todo.create({title:title})
       this.pushObject(todo)
    },
    init: function(){
        this.createTodo("Sleep");
        this.createTodo("Eat");
        this.createTodo("Watch TV");
    }
});

/*******************
        View
*******************/

App.TableView = Em.View.extend({
    tagName : 'tr',
    isHoverBinding: 'this.todo.isHover',
    classNameBindings : ['isHover:hover'],
    todo : null,
    deleteTodo : function(thing){
        
    },
    click : function() {
        console.log(this.get('content'));
        //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);
    }
})