英文原文:http://emberjs.com/guides/getting-started/show-only-incomplete-todos/
接下来我们将对应用进行进一步的修改,使得用户可以导航至一个只显示未完成的待办事项列表的URL。
在index.html
中,将‘活动的’待办事项的<a>
标签改为Handlebars的{{link-to}}
助手,然后把所有(All)中的<a>
标签里的 active class 移除:
{{! ... 为保持代码简洁,在此省略了其他代码 ... }}
<li>
<a href="all">All</a>
</li>
<li>
{{#link-to "todos.active" activeClass="selected"}}Active{{/link-to}}
</li>
<li>
<a href="completed">Completed</a>
</li>
{{! ... 为保持代码简洁,在此省略了其他代码 ... }}
在js/router.js
中修改路由,使其可以识别新的路径,并实现对应的路由:
Todos.Router.map(function() {
this.resource('todos', { path: '/' }, function() {
// additional child routes
this.route('active');
});
});
// ... 为保持代码简洁,在此省略了其他代码 ...
Todos.TodosActiveRoute = 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});
}
});
本路由的模型数据是待办事项集合中isCompleted
属性为false
的子集。当一个待办事项的isCompleted
属性发生改变,这个子集就会自动更新来添加或者删除对应的待办事项。
通常情况下,切换至一个新的路由,都会改变渲染到父{{outlet}}
中的模板,但是在这里,我们更希望可以重用todos/index
模板。通过重写renderTemplete
方法,并指定render
方法调用时的模板和对应的控制器选项就可以实现。
重载浏览器确保没有发生任何错误,并且上面定义的行为出现。