TODO App

by Aras Balali Moghaddam

HTML

<script src="http://cloud.github.com/downloads/wycats/handlebars.js/handlebars-1.0.0.beta.6.js"></script>
<script src="http://cloud.github.com/downloads/emberjs/ember.js/ember-1.0.pre.js"></script>
 <script type="text/x-handlebars">
    {{view Todos.CreateToDoView id="new-todo" placeholder="What needs to be done?"}}
    
    {{#collection contentBinding="Todos.todosController" tagName="ul"}}
        <label>
          {{view Em.Checkbox checkedBinding="view.content.isDone"}} {{view.content.title}} - done: {{view.content.isDone}}
          </label>
    {{/collection}}

  </script>

JavaScript

/*models*/

Todos = Em.Application.create();

Todos.Todo = Em.Object.extend({
    title: null,
    isDone: false
});

/*controller*/

Todos.todosController = Em.ArrayController.create({
    content: [],
    
    createTodo: function(title){
        var todo = Todos.Todo.create({ title: title });
        this.pushObject(todo);    
    }
});

/*views*/

Todos.CreateToDoView = Em.TextField.extend({
    insertNewline : function(){
        var value = this.get("value");
        
        if (value){
            Todos.todosController.createTodo(value);
            this.set("value","");    
        }
    }
});