Marking a Model as Complete or Incomplete Edit Page

In this step we'll update our application to allow a user to mark a todo as complete or incomplete and persist the updated information.

In index.html update your template to wrap each todo in its own controller by adding an itemController argument to the {{each}} Handlebars helper. Then convert our static <input type="checkbox"> into a {{input}} helper:

1
2
3
4
5
6
7
8

<!--- ... additional lines truncated for brevity ... -->
{{#each itemController="todo"}}
  <li {{bind-attr class="isCompleted:completed"}}>
    {{input type="checkbox" checked=isCompleted class="toggle"}}
    <label>{{title}}</label><button class="destroy"></button>
  </li>
{{/each}}
<!--- ... additional lines truncated for brevity ... -->

When this {{input}} is rendered it will ask for the current value of the controller's isCompleted property. When a user clicks this input, it will call the controller's isCompleted property with an argument of either true or false depending on the new checked value of the input.

Implement the controller for each todo by matching the name used as the itemController value to a class in your application Todos.TodoController. Create a new file at js/controllers/todo_controller.js for this code. 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/todo_controller.js add code for Todos.TodoController and its isCompleted property:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

Todos.TodoController = Ember.ObjectController.extend({
  isCompleted: function(key, value){
    var model = this.get('model');

    if (value === undefined) {
      // property being used as a getter
      return model.get('isCompleted');
    } else {
      // property being used as a setter
      model.set('isCompleted', value);
      model.save();
      return value;
    }
  }.property('model.isCompleted')
});

When called from the template to display the current isCompleted state of the todo, this property will proxy that question to its underlying model. When called with a value because a user has toggled the checkbox in the template, this property will set the isCompleted property of its model to the passed value (true or false), persist the model update, and return the passed value so the checkbox will display correctly.

The isCompleted function is marked a computed property whose value is dependent on the value of model.isCompleted.

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

1
2
3
4
5
6

<!--- ... additional lines truncated for brevity ... -->
   <script src="js/models/todo.js"></script>
   <script src="js/controllers/todos_controller.js"></script>
   <script src="js/controllers/todo_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 change the isCompleted property of a todo.

Live Preview

Ember.js • TodoMVC

Additional Resources