Move some of the views to separate files.

Initialize controller views upon `init`.

dependency-examples/emberjs_require/js/app/controllers/todos.js

@@ -1,7 +1,9 @@
 define('app/controllers/todos', [
 		'app/controllers/entries',
-		'text!app/views/clear_button.html',
-		'text!app/views/items.html'
+		'app/views/items',
+		'app/views/stats',
+		'app/views/filters',
+		'app/views/clear_button',
 	],
 	/**
 	 * Todos controller
@@ -10,84 +12,51 @@ define('app/controllers/todos', [
 	 * which is an `ArrayProxy` linked with the `Store` model
 	 *
 	 * @param Class Entries, the Entries class
-	 * @param String button_html, the html view for the clearCompletedButton
-	 * @param String items_html, the html view for the `Todos` items
+	 * @param Class ItemsView, items view class
+	 * @param Class StatsView, stats view class
+	 * @param Class FiltersView, filters view class
+	 * @param Class ClearBtnView, clear button view class
 	 * @returns Class
 	 */
-	function( Entries, button_html, items_html ) {
+	function( Entries, ItemsView, StatsView, FiltersView, ClearBtnView ) {
 		return Entries.extend({
 			// New todo input
-			inputView: Ember.TextField.create({
+			InputView: Ember.TextField.extend({
 				placeholder: 'What needs to be done?',
 				elementId: 'new-todo',
-				storageBinding: 'Todos.todosController',
 				// Bind this to newly inserted line
 				insertNewline: function() {
 					var value = this.get( 'value' );
 					if ( value ) {
-						this.get( 'storage' ).createNew( value );
+						this.get( 'controller' ).createNew( value );
 						this.set( 'value', '' );
 					}
 				}
 			}),
 
-			// Stats report
-			statsView: Ember.View.create({
-				elementId: 'todo-count',
-				tagName: 'span',
-				contentBinding: 'Todos.todosController',
-				remainingBinding: 'Todos.todosController.remaining',
-				template: Ember.Handlebars.compile(
-					'<strong>{{remaining}}</strong> {{remainingString}} left'
-				),
-				remainingString: function() {
-					var remaining = this.get( 'remaining' );
-					return ( remaining === 1 ? ' item' : ' items' );
-				}.property( 'remaining' )
-			}),
-
 			// Handle visibility of some elements as items totals change
 			visibilityObserver: function() {
 				$( '#main, #footer' ).toggle( !!this.get( 'total' ) );
 			}.observes( 'total' ),
 
-			// Clear completed tasks button
-			clearCompletedButton: Ember.Button.create({
-				template: Ember.Handlebars.compile( button_html ),
-				target: 'Todos.todosController',
-				action: 'clearCompleted',
-				completedCountBinding: 'Todos.todosController.completed',
-				elementId: 'clear-completed',
-				classNameBindings: 'buttonClass',
-				// Observer to update class if completed value changes
-				buttonClass: function () {
-						if ( !this.get( 'completedCount' ) )
-								return 'hidden';
-				}.property( 'completedCount' )
-			}),
-
 			// Checkbox to mark all todos done.
-			allDoneCheckbox: Ember.Checkbox.create({
+			MarkAllChkbox: Ember.Checkbox.extend({
 				elementId: 'toggle-all',
-				checkedBinding: 'Todos.todosController.allAreDone'
-			}),
-
-			// Compile and render the todos view
-			todosView: Ember.View.create({
-				template: Ember.Handlebars.compile( items_html )
+				checkedBinding: 'controller.allAreDone'
 			}),
 
 			// Todo list item view
-			todoView: Ember.View.extend({
+			ItemView: Ember.View.extend({
+				contentBinding: 'controller',
 				classNames: [ 'view' ],
 				doubleClick: function() {
 					this.get( 'content' ).set( 'editing', true );
 				}
 			}),
 
 			// Todo list item editing view
-			todoEditor: Ember.TextField.extend({
-				storageBinding: 'Todos.todosController',
+			ItemEditor: Ember.TextField.extend({
+				storageBinding: 'content',
 				classNames: [ 'edit' ],
 				whenDone: function() {
 					this.get( 'todo' ).set( 'editing', false );
@@ -109,12 +78,21 @@ define('app/controllers/todos', [
 			// Activates the views and other initializations
 			init: function() {
 				this._super();
+
+				this.set( 'inputView', this.InputView.create({ controller: this }) );
+				this.set( 'markAllChkbox', this.MarkAllChkbox.create({ controller: this }) );
+				this.set( 'itemsView', ItemsView.create({ controller: this }) );
+				this.set( 'statsView', StatsView.create({ controller: this }) );
+				this.set( 'filtersView', FiltersView.create() );
+				this.set( 'clearBtnView', ClearBtnView.create({ controller: this }) );
+
 				this.get( 'inputView' ).appendTo( 'header' );
-				this.get( 'allDoneCheckbox' ).appendTo( '#main' );
-				this.get( 'todosView' ).appendTo( '#main' );
+				this.get( 'markAllChkbox' ).appendTo( '#main' );
+				this.get( 'itemsView' ).appendTo( '#main' );
 				this.get( 'statsView' ).appendTo( '#footer' );
-				this.get( 'clearCompletedButton' ).appendTo( '#footer' );
+				this.get( 'clearBtnView' ).appendTo( '#footer' );
+				this.get( 'filtersView' ).appendTo( '#footer' );
 			}
 		});
 	}
-);
+);

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

@@ -0,0 +1 @@
+Clear completed ({{completed}})

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

@@ -0,0 +1,11 @@
+<ul id="filters">
+	<li>
+		<a {{action showAll href=true}}>All</a>
+	</li>
+	<li>
+		<a {{action showActive href=true}}>Active</a>
+	</li>
+	<li>
+		<a {{action showCompleted href=true}}>Completed</a>
+	</li>
+</ul>

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

@@ -0,0 +1,13 @@
+{{#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}}

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

@@ -0,0 +1,5 @@
+{{#if oneLeft }}
+	<strong>{{remaining}}</strong> item left
+{{else}}
+	<strong>{{remaining}}</strong> items left
+{{/if}}

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

@@ -0,0 +1,26 @@
+define('app/views/clear_button', [
+		'text!app/templates/clear_button.html',
+		'ember'
+	],
+	/**
+	 * View to clear completed tasks
+	 *
+	 * @param String button_html, the html for view
+	 * @returns Class
+	 */
+	function( button_html ) {
+		return Ember.Button.extend({
+			template: Ember.Handlebars.compile( button_html ),
+			target: 'controller',
+			action: 'clearCompleted',
+			completedBinding: 'controller.completed',
+			elementId: 'clear-completed',
+			classNameBindings: 'buttonClass',
+			// Observer to update class if completed value changes
+			buttonClass: function () {
+				if ( !this.get( 'completed' ) )
+					return 'hidden';
+			}.property( 'completed' )
+		})
+	}
+);

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

@@ -0,0 +1,16 @@
+define('app/views/filters', [
+		'text!app/templates/filters.html',
+		'ember'
+	],
+	/**
+	 * View to render filter links
+	 *
+	 * @param String filters_html, filter links html view
+	 * @returns Class
+	 */
+	function( filters_html ) {
+		return Ember.View.extend({
+			template: Ember.Handlebars.compile( filters_html )
+		})
+	}
+);

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

@@ -0,0 +1,16 @@
+define('app/views/items', [
+		'text!app/templates/items.html',
+		'ember'
+	],
+	/**
+	 * View to render todos items
+	 *
+	 * @param String items_html, the html view for the `Todos` items
+	 * @returns Class
+	 */
+	function( items_html ) {
+		return Ember.View.extend({
+			template: Ember.Handlebars.compile( items_html )
+		})
+	}
+);

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

@@ -0,0 +1,22 @@
+define('app/views/stats', [
+		'text!app/templates/stats.html',
+		'ember'
+	],
+	/**
+	 * View to render todos stats
+	 *
+	 * @param String stats_html, stats indicator view
+	 * @returns Class
+	 */
+	function( stats_html ) {
+		return Ember.View.extend({
+			elementId: 'todo-count',
+			tagName: 'span',
+			remainingBinding: 'controller.remaining',
+			template: Ember.Handlebars.compile( stats_html ),
+			oneLeft: function() {
+				return this.get( 'remaining' ) === 1;
+			}.observes( 'remaining' )
+		})
+	}
+);