当前位置: 首页 > 文档资料 > Ember.js 中文指南 >

入门指南 - 提示所有待办事项已完成

优质
小牛编辑
131浏览
2023-12-01

英文原文: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>
{{! ... 为保持代码简洁,在此省略了其他代码 ... }}

这个复选框将在控制器的属性allAreDonetrue的时候被自动选中,为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

附加资源