StackO 16550623

by amindunited

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">
      {{render table}}
       <button {{action deleteTodo target="App.todoListController"}}>Delete</button>
</script>
<script type="text/x-handlebars" data-template-name="tableRow">
    <td>{{view.content.title}}</td>
    <td><a href="javascrpt:" {{action "deleteTodo" target="view"}}>X</a></td>
</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.CollectionView.extend({
    contentBinding: 'App.todoListController.content',
    itemViewClass: 'App.TableRowView',
    tagName:"table",
    eventManager: Em.Object.create({
        click : function(event, view) {
            
            //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
            view.get('content').set('isHover', true);
        }
    })
})

App.TableRowView = Em.View.extend({
    templateName: "tableRow",
    tagName : 'tr',
    isHoverBinding: 'this.content.isHover',
    classNameBindings : ['isHover:hover'],
    todo : null,
    deleteTodo : function(thing){
        
    }
})