Ampersand.js - extract methods to collection

- Extract method to count total completed todos
- Listen only to relevant events in handleTodosUpdate
- Use .listenTo instead of .on

examples/ampersand/js/models/me.js

@@ -14,13 +14,12 @@ module.exports = State.extend({
 	initialize: function () {
 		// Listen to changes to the todos collection that will
 		// affect lengths we want to calculate.
-		this.listenTo(this.todos, 'change:completed change:title add remove', this.handleTodosUpdate);
+		this.listenTo(this.todos, 'change:completed add remove', this.handleTodosUpdate);
 		// We also want to calculate these values once on init
 		this.handleTodosUpdate();
-
 		// Listen for changes to `mode` so we can update
 		// the collection mode.
-		this.on('change:mode', this.handleModeChange, this);
+		this.listenTo(this, 'change:mode', this.handleModeChange);
 	},
 	collections: {
 		todos: Todos
@@ -71,18 +70,15 @@ module.exports = State.extend({
 	// so they're easy to listen to and bind to DOM
 	// where needed.
 	handleTodosUpdate: function () {
-		var completed = 0;
-		var todos = this.todos;
-		todos.each(function (todo) {
-			if (todo.completed) {
-				completed++;
-			}
-		});
+		var total = this.todos.length;
+		var completed = this.todos.countCompleted();
+		// We use `set` here in order to update multiple attributes at once
+		// It's possible to set directely using `this.completedCount = completed` ...
 		this.set({
 			completedCount: completed,
-			activeCount: todos.length - completed,
-			totalCount: todos.length,
-			allCompleted: todos.length === completed
+			activeCount: total - completed,
+			totalCount: total,
+			allCompleted: total === completed
 		});
 	},
 	handleModeChange: function () {

examples/ampersand/js/models/todos.js

@@ -30,6 +30,11 @@ module.exports = Collection.extend({
 		// and persist on change
 		this.on('all', this.writeToLocalStorage, this);
 	},
+	countCompleted: function() {
+		return this.reduce(function(total, todo){
+			return todo.completed ? ++total : total;
+		}, 0);
+	},
 	// Helper for removing all completed items
 	clearCompleted: function () {
 		var toRemove = this.filter(function (todo) {

examples/ampersand/todomvc.bundle.js

@@ -43,13 +43,12 @@ module.exports = State.extend({
 	initialize: function () {
 		// Listen to changes to the todos collection that will
 		// affect lengths we want to calculate.
-		this.listenTo(this.todos, 'change:completed change:title add remove', this.handleTodosUpdate);
+		this.listenTo(this.todos, 'change:completed add remove', this.handleTodosUpdate);
 		// We also want to calculate these values once on init
 		this.handleTodosUpdate();
-
 		// Listen for changes to `mode` so we can update
 		// the collection mode.
-		this.on('change:mode', this.handleModeChange, this);
+		this.listenTo(this, 'change:mode', this.handleModeChange);
 	},
 	collections: {
 		todos: Todos
@@ -100,18 +99,15 @@ module.exports = State.extend({
 	// so they're easy to listen to and bind to DOM
 	// where needed.
 	handleTodosUpdate: function () {
-		var completed = 0;
-		var todos = this.todos;
-		todos.each(function (todo) {
-			if (todo.completed) {
-				completed++;
-			}
-		});
+		var total = this.todos.length;
+		var completed = this.todos.countCompleted();
+		// We use `set` here in order to update multiple attributes at once
+		// It's possible to set directely using `this.completedCount = completed` ...
 		this.set({
 			completedCount: completed,
-			activeCount: todos.length - completed,
-			totalCount: todos.length,
-			allCompleted: todos.length === completed
+			activeCount: total - completed,
+			totalCount: total,
+			allCompleted: total === completed
 		});
 	},
 	handleModeChange: function () {
@@ -188,6 +184,11 @@ module.exports = Collection.extend({
 		// and persist on change
 		this.on('all', this.writeToLocalStorage, this);
 	},
+	countCompleted: function() {
+		return this.reduce(function(total, todo){
+			return todo.completed ? ++total : total;
+		}, 0);
+	},
 	// Helper for removing all completed items
 	clearCompleted: function () {
 		var toRemove = this.filter(function (todo) {