Display a button to remove all completed todos

http://guides.emberjs.com/v1.10.0/getting-started/display-a-button-to-remove-completed-todos/
chrislopresto · Mar 12, 2015 · 3b58db0 · 3b58db0
1 parent 2de790d
commit 3b58db0
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 3 deletions.
diff --git a/app/controllers/todos.js b/app/controllers/todos.js
@@ -2,6 +2,12 @@ import Ember from 'ember';
 
 export default Ember.ArrayController.extend({
   actions: {
+    clearCompleted: function() {
+      var completed = this.filterBy('isCompleted', true);
+      completed.invoke('deleteRecord');
+      completed.invoke('save');
+    },
+
     createTodo: function() {
       // Get the todo title set by the "New Todo" text field
       var title = this.get('newTitle');
@@ -21,6 +27,14 @@ export default Ember.ArrayController.extend({
     }
   },
 
+  hasCompleted: function() {
+    return this.get('completed') > 0;
+  }.property('completed'),
+
+  completed: function() {
+    return this.filterBy('isCompleted', true).get('length');
+  }.property('@each.isCompleted'),
+
   remaining: function() {
     return this.filterBy('isCompleted', false).get('length');
   }.property('@each.isCompleted'),

diff --git a/app/templates/todos.hbs b/app/templates/todos.hbs
@@ -31,9 +31,11 @@
       </li>
     </ul>
 
-    <button id="clear-completed">
-      Clear completed (1)
-    </button>
+    {{#if hasCompleted}}
+      <button id="clear-completed" {{action "clearCompleted"}}>
+        Clear completed ({{completed}})
+      </button>
+    {{/if}}
   </footer>
 </section>