Change code to be more idiomatic ember

 * Focus new-todo input on load
 * Use CP's for reamining and completed
 * Add pluralize helper, remove html from controller
 * Add TodoController.removeTodo method
 * We want to avoid debouncing a call to `send`, so we make `removeTodo`
   a method on the controller, and have the `removeTodo` *action* simply
   call that method.
 * Move Todo auto-save from model into controller

architecture-examples/emberjs/index.html

@@ -30,7 +30,7 @@
 						{{input type="checkbox" id="toggle-all" checked=allAreDone}}
 					</section>
 					<footer id="footer">
-						<span id="todo-count">{{{remainingFormatted}}}</span>
+						<span id="todo-count"><strong>{{remaining.length}}</strong> {{pluralize 'item' remaining.length}} left</span>
 						<ul id="filters">
 							<li>
 								{{#link-to "todos.index" activeClass="selected"}}All{{/link-to}}
@@ -42,9 +42,9 @@
 								{{#link-to "todos.completed" activeClass="selected"}}Completed{{/link-to}}
 							</li>
 						</ul>
-						{{#if hasCompleted}}
+						{{#if completed.length}}
 							<button id="clear-completed" {{action "clearCompleted"}}>
-								Clear completed ({{completed}})
+								Clear completed ({{completed.length}})
 							</button>
 						{{/if}}
 					</footer>
@@ -72,5 +72,7 @@
 		<script src="js/controllers/todos_controller.js"></script>
 		<script src="js/controllers/todo_controller.js"></script>
 		<script src="js/views/edit_todo_view.js"></script>
+		<script src="js/views/todos_view.js"></script>
+		<script src="js/helpers/pluralize.js"></script>
 	</body>
 </html>

architecture-examples/emberjs/js/controllers/todo_controller.js

@@ -22,15 +22,15 @@ Todos.TodoController = Ember.ObjectController.extend({
 				// enter (once via 'insert-newline' and once via 'focus-out').
 				//
 				// We debounce our call to 'removeTodo' so that it only gets
-				// sent once.
-				Ember.run.debounce(this, this.send, 'removeTodo', 0);
+				// made once.
+				Ember.run.debounce(this, 'removeTodo', 0);
 			} else {
 				var todo = this.get('model');
 				todo.set('title', bufferedTitle);
 				todo.save();
 			}
 
-			// Re-set our newly edited title to persist it's trimmed version
+			// Re-set our newly edited title to persist its trimmed version
 			this.set('bufferedTitle', bufferedTitle);
 			this.set('isEditing', false);
 		},
@@ -41,10 +41,18 @@ Todos.TodoController = Ember.ObjectController.extend({
 		},
 
 		removeTodo: function () {
-			var todo = this.get('model');
-
-			todo.deleteRecord();
-			todo.save();
+			this.removeTodo();
 		}
-	}
+	},
+
+	removeTodo: function () {
+		var todo = this.get('model');
+
+		todo.deleteRecord();
+		todo.save();
+	},
+
+	saveWhenCompleted: function () {
+		this.get('model').save();
+	}.observes('isCompleted')
 });

architecture-examples/emberjs/js/controllers/todos_controller.js

@@ -3,7 +3,6 @@
 
 Todos.TodosController = Ember.ArrayController.extend({
 	actions: {
-
 		createTodo: function () {
 			var title, todo;
 
@@ -25,37 +24,26 @@ Todos.TodosController = Ember.ArrayController.extend({
 		},
 
 		clearCompleted: function () {
-			var completed = this.filterProperty('isCompleted', true);
+			var completed = this.get('completed');
 			completed.invoke('deleteRecord');
 			completed.invoke('save');
 		},
 	},
 
-	remaining: function () {
-		return this.filterProperty('isCompleted', false).get('length');
-	}.property('@each.isCompleted'),
-
-	remainingFormatted: function () {
-		var remaining = this.get('remaining');
-		var plural = remaining === 1 ? 'item' : 'items';
-		return '<strong>%@</strong> %@ left'.fmt(remaining, plural);
-	}.property('remaining'),
+	/* properties */
 
-	completed: function () {
-		return this.filterProperty('isCompleted', true).get('length');
-	}.property('@each.isCompleted'),
-
-	hasCompleted: function () {
-		return this.get('completed') > 0;
-	}.property('completed'),
+	remaining: Ember.computed.filterBy('content', 'isCompleted', false),
+	completed: Ember.computed.filterBy('content', 'isCompleted', true),
 
 	allAreDone: function (key, value) {
 		if (value !== undefined) {
 			this.setEach('isCompleted', value);
 			return value;
 		} else {
-			return !!this.get('length') &&
-				this.everyProperty('isCompleted', true);
+			var length = this.get('length');
+			var completedLength = this.get('completed.length');
+
+			return length > 0 && length === completedLength;
 		}
-	}.property('@each.isCompleted')
+	}.property('length', 'completed.length')
 });

architecture-examples/emberjs/js/helpers/pluralize.js

+/*global Todos, Ember */
+'use strict';
+
+Ember.Handlebars.helper('pluralize', function (singular, count) {
+	/* From Ember-Data */
+	var inflector = new Ember.Inflector(Ember.Inflector.defaultRules);
+
+	return count === 1 ? singular : inflector.pluralize(singular);
+});

architecture-examples/emberjs/js/models/todo.js

@@ -3,9 +3,5 @@
 
 Todos.Todo = DS.Model.extend({
 	title: DS.attr('string'),
-	isCompleted: DS.attr('boolean'),
-
-	saveWhenCompletedChanged: function () {
-		this.save();
-	}.observes('isCompleted')
+	isCompleted: DS.attr('boolean')
 });

architecture-examples/emberjs/js/views/todos_view.js

+/*global Todos, Ember */
+'use strict';
+
+Todos.TodosView = Ember.View.extend({
+	focusInput: function () {
+		this.$('#new-todo').focus();
+	}.on('didInsertElement')
+});