Deleting a Model Edit Page

TodoMVC displays a button for removing todos next to each todo when its <li> is hovered. Clicking this button will remove the todo and update the display of remaining incomplete todos and remaining completed todos appropriately.

In index.html update the static <button> element to include an {{action}} Handlebars helper:

1
2
3

<!--- ... additional lines truncated for brevity ... -->
<button {{action "removeTodo"}} class="destroy"></button>
<!--- ... additional lines truncated for brevity ... -->

In js/controllers/todo_controller.js implement the removeTodo method referenced in the template's {{action}} Handlebars helper:

1
2
3
4
5
6
7
8
9

// ... additional lines truncated for brevity ...
actions: {
  removeTodo: function () {
    var todo = this.get('model');
    todo.deleteRecord();
    todo.save();
  },
}
// ... additional lines truncated for brevity ...

This method will delete the todo locally and then persist this data change.

Because the todo is no longer part of the collection of all todos, its <li> element in the page will be automatically removed for us. If the deleted todo was incomplete, the count of remaining todos will be decreased by one and the display of this number will be automatically re-rendered. If the new count results in an inflection change between "item" and "items" this area of the page will be automatically re-rendered.

Reload your web browser to ensure that there are no errors and the behaviors described above occurs.

Live Preview

Ember.js • TodoMVC

Additional Resources