发布于 2015-08-18 16:34:34 | 432 次阅读 | 评论: 0 | 来源: 网络整理
接下来，我们将修改我们的应用，使其能反映实际完成的待办事项数量，取缔我们之前的硬编码。我们使用下面两个属相来更新index.html：
1 2 3 4 5 |
{{! ... 为保持代码简洁，在此省略了其他代码 ... }}
<span id="todo-count">
<strong>{{remaining}}</strong> {{inflection}} left
</span>
{{! ... 为保持代码简洁，在此省略了其他代码 ... }}
|
在模板的控制器Todos.TodosController中实现以上的属性：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
// ... 为保持代码简洁，在此省略了其他代码 ...
actions: {
// ... 为保持代码简洁，在此省略了其他代码 ...
},
remaining: function() {
return this.filterBy('isCompleted', false).get('length');
}.property('@each.isCompleted'),
inflection: function() {
var remaining = this.get('remaining');
return remaining === 1 ? 'item' : 'items';
}.property('remaining')
// ... 为保持代码简洁，在此省略了其他代码 ...
|
remaining属性表示isCompleted属性为假的待办事项的数量。如果任何待办事项的isCompleted属相发生改变，remaining将会被重新计算。如果remaining属性的值发生改变，那么模板中显示剩余的待办事项数量的部分将自动更新为新的值。
inflection属性根据当前列表中有多少待办事项来返回item的单数或复数形式。模板中显示剩余待办事项数量的部分将会自动更新该属性。
重新载入Web浏览器以确保没有任何错误发生。那么就可以看到正确的剩余待办事项数量。