Transitioning to Show Only Complete Todos

Next we'll update the application so a user can navigate to a url where only todos that have already been completed are displayed.

In index.html convert the <a> tag for 'Completed' todos into a Handlebars {{link-to}} helper:

{{! ... additional lines truncated for brevity ... }}
<li>
  <a href="all">All</a>
</li>
<li>
  {{#link-to "todos.active" activeClass="selected"}}Active{{/link-to}}
</li>
<li>
  {{#link-to "todos.completed" activeClass="selected"}}Completed{{/link-to}}
</li>
{{! ... additional lines truncated for brevity ... }}

In js/router.js update the router to recognize this new path and implement a matching route:

Todos.Router.map(function() {
  this.resource('todos', { path: '/' }, function() {
    // additional child routes
    this.route('active');
    this.route('completed');
  });
});

// ... additional lines truncated for brevity ...

Todos.TodosCompletedRoute = Ember.Route.extend({
  model: function() {
    return this.store.filter('todo', function(todo) {
      return todo.get('isCompleted');
    });
  },
  renderTemplate: function(controller) {
    this.render('todos/index', {controller: controller});
  }
});

The model data for this route is the collection of todos whose isCompleted property is true. Just like we recently saw with the similar function for the active todos, changes to a todo's isCompleted property will automatically cause this collection to refresh, updating the UI accordingly.

TodosCompletedRoute has a similar purpose to the active todos - to reuse the existing todos/index template, rather than having to create a new template.

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

Live Preview

Additional Resources