文章来源于网络收集而来，版权归原创者所有，如有侵权请及时联系！

入门指南 - 显示未完成待办事项的数量

发布于 2020-02-21 15:48:01 字数 1813 浏览 942 评论 0 收藏 0

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

接下来，我们将修改我们的应用，使其能反映实际完成的待办事项数量，取缔我们之前的硬编码。我们使用下面两个属相来更新index.html：

{{! ... 为保持代码简洁，在此省略了其他代码 ... }}
<span id="todo-count">
  <strong>{{remaining}}</strong> {{inflection}} left
</span>
{{! ... 为保持代码简洁，在此省略了其他代码 ... }}

在模板的控制器Todos.TodosController中实现以上的属性：

// ... 为保持代码简洁，在此省略了其他代码 ...
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浏览器以确保没有任何错误发生。那么就可以看到正确的剩余待办事项数量。