Ember Octane is here! A lot has changed since Ember 3.14, including these Guides. Read more in the Ember Blog.

Old Guides - You are viewing the guides for Ember v1.10.0. VIEW v3.15.0
Edit Page

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

Ember.js • TodoMVC

Additional Resources