SproutCore - Getting Started

todos.handlebars

<h1>Todos</h1>
{{#view Todos.CreateTodoView}}
<input id="new-todo" type="text" placeholder="What needs to be done?" />
{{/view}}

{{#collection SC.TemplateCollectionView contentBinding="Todos.todoListController"}}
  {{content.title}}
{{/collection}}

todos.js

// ==========================================================================
// Project:   Todos
// Copyright: ©2011 My Company, Inc.
// ==========================================================================

Todos = SC.Application.create();

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

Todos.CreateTodoView = SC.TextField.extend({
  insertNewline: function() {
    var value = this.get('value');

    if (value) {
      Todos.todoListController.createTodo(value);
      this.set('value', '');
    }
  }
});

SC.ready(function() {
  Todos.mainPane = SC.TemplatePane.append({
    layerId: 'todos',
    templateName: 'todos'
  });
});

Todos.todoListController = SC.ArrayController.create({
  content: [],

  createTodo: function(title) {
    var todo = Todos.Todo.create({title: title});
    this.pushObject(todo);
  }
});