英文原文:http://emberjs.com/guides/getting-started/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.
接下来我们将对应用进行进一步的修改,使得用户可以导航只一个只显示已完成的待办事项列表的URL。
In index.html
convert the <a>
tag for ‘Completed’ todos into a Handlebars {{link-to}}
helper:
在index.html
中,将‘已完成’待办事项的<a>
标签改为Handlebars的{{link-to}}
助手:
{{! ... 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:
在js/router.js
中修改路由,使其可以识别新的路径,并实现对应的路由:
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.
本路由的模型数据是待办事项集合中isCompleted
属性为true
的子集。就像我们最近看到的激活待办事项的类似功能,改变待办事项的 isCompleted
属性会自动触发该子集的刷新,因此更新UI。
TodosCompletedRoute
has a similar purpose to the active todos - to reuse the existing todos/index
template, rather than having to create a new template.
TodosCompletedRoute
也有类似的目的来激活待办事项 - 复用现存的 todos/index
模板,而不必创建一个新的模板。
Reload your web browser to ensure that there are no errors and the behavior described above occurs.
重载浏览器确保没有发生任何错误,并且上面定义的行为出现。