添加移除所有已完成待办事项的按钮 编辑页面

英文原文：http://emberjs.com/guides/getting-started/display-a-button-to-remove-completed-todos/

TodoMVC允许用户通过点击一个按钮来删除所有已完成的待办事项。这个按钮只在存在已完成的待办事项的时候才显示，并显示已完成的数量。当点击该按钮时，所有已完成的待办事项将被删除。

在此，我们来实现这个功能。在index.html中，修改静态的<button>以便清除所有已完成的待办事项：

1
2
3
4
5
6
7

{{! ... 为保持代码简洁，在此省略了其他代码 ... }}
{{#if hasCompleted}}
  <button id="clear-completed" {{action "clearCompleted"}}>
    Clear completed ({{completed}})
  </button>
{{/if}}
{{! ... 为保持代码简洁，在此省略了其他代码 ... }}

在js/controllers/todos_controller.js中实现匹配属性和一个在按钮点击时被调用的方法。该方法实现删除已完成待办事项和将这些改变持久化。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

// ... 为保持代码简洁，在此省略了其他代码 ...
actions: {
  clearCompleted: function() {
    var completed = this.filterBy('isCompleted', true);
    completed.invoke('deleteRecord');
    completed.invoke('save');
  },
// ... 为保持代码简洁，在此省略了其他代码 ...
},
hasCompleted: function() {
  return this.get('completed') > 0;
}.property('completed'),

completed: function() {
  return this.filterBy('isCompleted', true).get('length');
}.property('@each.isCompleted'),
// ... 为保持代码简洁，在此省略了其他代码 ...

completed 和 clearCompleted 方法都调用 filterBy 方法，它是ArrayController API的一部分，并且返回一个EmberArray的实例，该实例包含回调返回为真的条目。clearCompleted 方法同样调用 invoke 方法，该方法是EmberArray API的一部分。invoke 将会在数组中的每个对象上执行一个方法，如果这个对象上存在方法的话。

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

在线演示

Ember.js • TodoMVC

附加资源