入门指南 - 提示所有待办事项已完成
优质
小牛编辑
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> {{! ... 为保持代码简洁,在此省略了其他代码 ... }} |
这个复选框将在控制器的属性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
属性发生改变,这个属性的值将被重新计算。如果返回值发生改变,模板中需要更新的内容会自动为我们保持更新。
重载浏览器确保没有任何错误,并且以上描述的功能正常。