Creating a New Model Instance Edit Page

Next we'll update our static HTML <input> to an Ember view that can expose more complex behaviors. Update index.html to replace the new todo <input> with a {{input}} helper:

1
2
3
4
5

<!--- ... additional lines truncated for brevity ... -->
<h1>todos</h1>
{{input type="text" id="new-todo" placeholder="What needs to be done?" 
              value=newTitle action="createTodo"}}
<!--- ... additional lines truncated for brevity ... -->

This will render an <input> element at this location with the same id and placeholder attributes applied. It will also connect the newTitle property of this template's controller to the value attribute of the <input>. When one changes, the other will automatically update to remain synchronized.

Additionally, we connect user interaction (pressing the <enter> key) to a method createTodo on this template's controller.

Because we have not needed a custom controller behavior until this point, Ember.js provided a default controller object for this template. To handle our new behavior, we can implement the controller class Ember.js expects to find according to its naming conventions and add our custom behavior. This new controller class will automatically be associated with this template for us.

Add a js/controllers/todos_controller.js file. You may place this file anywhere you like (even just putting all code into the same file), but this guide will assume you have created the file and named it as indicated.

Inside js/controllers/todos_controller.js implement the controller Ember.js expects to find according to its naming conventions:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

Todos.TodosController = Ember.ArrayController.extend({
  actions: {
    createTodo: function () {
      // Get the todo title set by the "New Todo" text field
      var title = this.get('newTitle');
      if (!title.trim()) { return; }

      // Create the new Todo model
      var todo = this.store.createRecord('todo', {
        title: title,
        isCompleted: false
      });

      // Clear the "New Todo" text field
      this.set('newTitle', '');

      // Save the new model
      todo.save();
    }
  }
});

This controller will now respond to user action by using its newTitle property as the title of a new todo whose isCompleted property is false. Then it will clear its newTitle property which will synchronize to the template and reset the textfield. Finally, it persists any unsaved changes on the todo.

In index.html include js/controllers/todos_controller.js as a dependency:

1
2
3
4
5

<!--- ... additional lines truncated for brevity ... -->
   <script src="js/models/todo.js"></script>
   <script src="js/controllers/todos_controller.js"></script>
 </body>
 <!--- ... additional lines truncated for brevity ... -->

Reload your web browser to ensure that all files have been referenced correctly and no errors occur. You should now be able to add additional todos by entering a title in the <input> and hitting the <enter> key.

Live Preview

Ember.js • TodoMVC

Additional Resources