Rewrite the items view.

Cleanup `Ember.CollectionView` template, on editing use a contextual view.
Fix race condition issue with focusOut/insertNewline when editing last item.

dependency-examples/emberjs_require/js/app/templates/items.html

-{{#collection contentBinding="controller" controllerBinding="controller" id="todo-list" tagName="ul" itemClassBinding="content.completed content.editing" }}
-	{{#unless content.editing}}
-		{{#view controller.ItemView contentBinding="content" }}
-			{{view Ember.Checkbox valueBinding="content.completed" class="toggle"}}
-			{{#view Ember.View tagName="label" todoBinding="content"}}
-				{{todo.title}}
-			{{/view}}
-			{{view Ember.Button target="controller" action="removeObject" class="destroy" todoBinding="content"}}
-		{{/view}}
-	{{else}}
-		{{view controller.ItemEditor todoBinding="content" valueBinding="content.title"}}
-	{{/unless}}
-{{/collection}}
+{{#unless view.content.editing}}
+	{{view Ember.Checkbox checkedBinding="view.content.completed" class="toggle"}}
+	<label>{{view.content.title}}</label>
+	<button {{action removeItem}} class="destroy" ></button>
+{{else}}
+	{{view view.ItemEditorView contentBinding="view.content"}}
+{{/unless}}

dependency-examples/emberjs_require/js/app/views/items.js

@@ -9,8 +9,44 @@ define('app/views/items', [
 	 * @returns Class
 	 */
 	function( items_html ) {
-		return Ember.View.extend({
-			template: Ember.Handlebars.compile( items_html )
+		return Ember.CollectionView.extend({
+			contentBinding: 'controller',
+			tagName: 'ul',
+			elementId: 'todo-list',
+			itemViewClass: Ember.View.extend({
+				template: Ember.Handlebars.compile( items_html ),
+				classNames: [ 'view' ],
+				classNameBindings: ['content.completed', 'content.editing'],
+				doubleClick: function() {
+					this.get( 'content' ).set( 'editing', true );
+				},
+				removeItem: function() {
+					this.get( 'controller' ).removeObject( this.get( 'content' ) );
+				},
+				ItemEditorView: Ember.TextField.extend({
+					valueBinding: 'content.title',
+					classNames: [ 'edit' ],
+					change: function() {
+						if ( Ember.empty( this.getPath( 'content.title' ) ) ) {
+							this.get( 'controller' ).removeObject( this.get( 'content' ) );
+						}
+					},
+					whenDone: function() {
+						this.get( 'content' ).set( 'editing', false );
+					},
+					focusOut: function() {
+						this.whenDone();
+					},
+					didInsertElement: function() {
+						this.$().focus();
+					},
+					insertNewline: function() {
+						this.whenDone();
+					}
+				})
+			}),
+
+
 		})
 	}
 );