英文原文：http://emberjs.com/guides/getting-started/show-only-incomplete-todos/

Next we’ll update the application so a user can navigate to a url where only todos that are not complete are displayed.

接下来我们将对应用进行进一步的修改，使得用户可以导航至一个只显示未完成的待办事项列表的URL。

In index.html convert the <a> tag for ‘Active’ todos into a Handlebars {{link-to}} helper and remove the active class from the <a> tag for ‘All’:

在index.html中，将‘活动的’待办事项的<a>标签改为Handlebars的{{link-to}}助手，然后把所有(All)中的<a>标签里的 active class 移除：

  1. {{! ... additional lines truncated for brevity ... }}
  2. {{! ... 为保持代码简洁，在此省略了其他代码 ... }}
  3. <li>
  4.   <a href="all">All</a>
  5. </li>
  6. <li>
  7.   {{#link-to "todos.active" activeClass="selected"}}Active{{/link-to}}
  8. </li>
  9. <li>
  10.   <a href="completed">Completed</a>
  11. </li>
  12. {{! ... additional lines truncated for brevity ... }}
  13. {{! ... 为保持代码简洁，在此省略了其他代码 ... }}

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

在js/router.js中修改路由，使其可以识别新的路径，并实现对应的路由：

  1. Todos.Router.map(function() {
  2.   this.resource('todos', { path: '/' }, function() {
  3.     // additional child routes
  4.     this.route('active');
  5.   });
  6. });
  8. // ... additional lines truncated for brevity ...
  9. // ... 为保持代码简洁，在此省略了其他代码 ... 
  10. Todos.TodosActiveRoute = Ember.Route.extend({
  11.   model: function(){
  12.     return this.store.filter('todo', function(todo) {
  13.       return !todo.get('isCompleted');
  14.     });
  15.   },
  16.   renderTemplate: function(controller) {
  17.     this.render('todos/index', {controller: controller});
  18.   }
  19. });

The model data for this route is the collection of todos whose isCompleted property is false. When a todo’s isCompleted property changes this collection will automatically update to add or remove the todo appropriately.

本路由的模型数据是待办事项集合中isCompleted属性为false的子集。当一个待办事项的isCompleted属性发生改变，这个子集就会自动更新来添加或者删除对应的待办事项。

Normally transitioning into a new route changes the template rendered into the parent {{outlet}}, but in this case we’d like to reuse the existing todos/index template. We can accomplish this by implementing the renderTemplate method and calling render ourselves with the specific template and controller options.

通常情况下，切换至一个新的路由，都会改变渲染到父{{outlet}}中的模板，但是在这里，我们更希望可以重用todos/index模板。通过重写renderTemplete方法，并指定render方法调用时的模板和对应的控制器选项就可以实现。

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

重载浏览器确保没有发生任何错误，并且上面定义的行为出现。

Live Preview

在线演示

Ember.js • TodoMVC

Additional Resources

附加资源