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

Next we’ll update our template to indicate when all todos have been completed. In index.html replace the static checkbox <input> with an {{input}}:

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

  1. {{! ... additional lines truncated for brevity ... }}
  2. {{! ... 为保持代码简洁,在此省略了其他代码 ... }}
  3. <section id="main">
  4. {{outlet}}
  5. {{input type="checkbox" id="toggle-all" checked=allAreDone}}
  6. </section>
  7. {{! ... additional lines truncated for brevity ... }}
  8. {{! ... 为保持代码简洁,在此省略了其他代码 ... }}

This checkbox will be checked when the controller property allAreDone is true and unchecked when the property allAreDone is false.

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

In js/controllers/todos_controller.js implement the matching allAreDone property:

js/controllers/todos_controller.js中实现allAreDone属性:

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

This property will be true if the controller has any todos and every todo’s isCompleted property is true. If the isCompleted property of any todo changes, this property will be recomputed. If the return value has changed, sections of the template that need to update will be automatically updated for us.

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

Reload your web browser to ensure that there are no errors and the behavior described above occurs.

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

Live Preview

在线演示

Ember.js • TodoMVC

Additional Resources

附加资源