提示所有待办事项已完成 编辑页面

英文原文：http://emberjs.com/guides/getting-started/show-when-all-todos-are-complete/

接下来我们将修改模板来提示所有待办事项都已经完成。在index.html中替换静态的复选框<input>为{{input}}：

1
2
3
4
5
6

{{! ... 为保持代码简洁，在此省略了其他代码 ... }}
<section id="main">
  {{outlet}}
  {{input type="checkbox" id="toggle-all" checked=allAreDone}}
</section>
{{! ... 为保持代码简洁，在此省略了其他代码 ... }}

这个复选框将在控制器的属性allAreDone为true的时候被自动选中，为false的时候不选中。

在js/controllers/todos_controller.js中实现allAreDone属性：

1
2
3
4
5

// ... additional lines truncated for brevity ...
allAreDone: function(key, value) {
  return !!this.get('length') && this.isEvery('isCompleted');
}.property('@each.isCompleted')
// ... additional lines truncated for brevity ...

这一属性在控制器包含待办事项，且每项都已完成的时候为true。如果任意待办事项的isCompleted属性发生改变，这个属性的值将被重新计算。如果返回值发生改变，模板中需要更新的内容会自动为我们保持更新。

重载浏览器确保没有任何错误，并且以上描述的功能正常。

在线演示

Ember.js • TodoMVC

附加资源