ToDo App is not working properly

Question

I was trying to write a ToDo-App, but i have an Issue with my Checkbox right at the beginning...

http://jsfiddle.net/LRQyv/

The template:

<script type="text/x-handlebars">
  {{view Todos.CreateTodoView id="new-todo" placeholder="What has to be done?"}}
  {{#collection contentBinding="Todos.todosController" tagName="ul"}}
      {{view Em.Checkbox titleBinding="content.title" valueBinding="content.isDone"}}
  {{/collection}}
</script>​

The code:

window.Todos = Ember.Application.create();
Todos.initialize();

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

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

Todos.CreateTodoView = Ember.TextField.extend({
    insertNewline: function() {
        var value = this.get('value');
        if (value) {
            Todos.todosController.createTodo(value);
            this.set('value', '');
        }
    }
});​

..any ideas why there are no labels added, when adding a ToDo-Item?

Answer 1

There are two problems in your code, first, you're expecting the Ember.Checkbox to allow a title binding. It's not possible, as described in the doc:

You can add a label tag yourself in the template where the Ember.Checkbox is being used.

And second, you have to take a look at Ember.js View Context changes. Your bindings have to be using {{view.content.title}} and {{view.content.isDone}}.

Here is your template after this modifications:

<script type="text/x-handlebars">
  {{view Todos.CreateTodoView id="new-todo" placeholder="What has to be done?"}}
  {{#collection contentBinding="Todos.todosController" tagName="ul"}}
      <label>
        {{view Em.Checkbox labelBinding="content.title" valueBinding="view.content.isDone"}}
        {{view.content.title}}
      </label>
  {{/collection}}
</script>​

And the associated JSFiddle.