Ember Dollar Input

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">
      <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>
</script>

CSS

html, body {
    font-size: 9pt;
}
h1 {
    font-size: 18pt;
}
h2 {
    font-size: 12pt;
}
.location ul { list-style-type: none; }
.location ul li { 
    list-style-type: none; 
    display: inline-block;
    margin: 0;
    padding:0 10px 0 10px;
    border: solid 1px gray;
    border-right:none;
}

JavaScript

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


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

/*******************
        View
*******************/
App.TableView = 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);
    }
})