显示未完成待办事项的数量 编辑页面

英文原文：http://emberjs.com/guides/getting-started/displaying-the-number-of-incomplete-todos/

接下来，我们将修改我们的应用，使其能反映实际完成的待办事项数量，取缔我们之前的硬编码。我们使用下面两个属相来更新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浏览器以确保没有任何错误发生。那么就可以看到正确的剩余待办事项数量。

在线示例

Ember.js • TodoMVC

附加资源