点击应用右下角的这个清除按钮 ... 可以删除掉所有的已经完成的任务项目 ... 在这个视频里我们去实现这个功能 ... 先去监听一下发生在这个按钮上面的点击事件 ... 发生点击事件以后，去执行一个函数 ... 在这个函数里面，去对所有的已经完成的任务，调用一个 destroy 方法，把它们挨个删除掉 ...

因为这个按钮元素是应用的视图的一部分 ... 所以，我们可以在应用的视图里面，去监听它的点击事件 ...

打开 AppView.js ...

监听的 DOM 事件，可以放在视图的 events 这个属性里面 ...

事件的类型是 click ... 事件是发生在删除按钮上的 ... 在这个按钮上有一个叫 #clear-completed 的一个 id ... 在这个按钮上，发生点击事件以后，去执行一下 clearCompleted 方法 ...

'click #clear-completed' : 'clearCompleted'

在下面， 再去定义一下这个方法 ...

clearCompleted: function() {}

在这个方法里面 ... 我们需要对每一个状态是完成的任务项目应用一个 destory 方法，把它们删除掉 .... 在这里，可以使用 Underscore 里面的 invoke 这个方法 ... 它可以为指定的列表里面的每一个项目，去应用一个方法 ...

_.invoke ... 先要给它指定一个列表项目 ... 这个列表就是状态是完成的任务 ... 之前我们在集合里面，定义了一个叫 getCompleted() 的方法，它可以得到已经完成的任务 ...

对这个列表里面的每一个项目去应用的方法就是这个项目的 destory 方法 ...

_.invoke(app.todoList.getCompleted(), 'destroy');

另起一行 ... 再用一个 return false;

测试

下面， 我们再去测试一下 ... 保存 .... 回到浏览器 ...

刷新 ...

标记几个任务为完成的状态 ....

注意在状态栏上会实时显示时结果 ...

然后点击 清除已完成 ...

这样会把应用里面，所有的状态是已完成的任务项目 ...