Add changes for #259, started in #260

architecture-examples/backbone/js/routers/router.js

@@ -15,8 +15,9 @@ var app = app || {};
 			// Set the current filter to be used
 			window.app.TodoFilter = param.trim() || '';
 
-			// Trigger a collection reset/addAll
-			window.app.Todos.trigger('reset');
+			// Trigger a collection filter event, causing hiding/unhiding
+			// of Todo view items
+			window.app.Todos.trigger('filter');
 		}
 	});
 

architecture-examples/backbone/js/views/app.js

@@ -29,14 +29,15 @@ $(function( $ ) {
 		initialize: function() {
 			this.input = this.$('#new-todo');
 			this.allCheckbox = this.$('#toggle-all')[0];
+			this.$footer = this.$('#footer');
+			this.$main = this.$('#main');
 
 			window.app.Todos.on( 'add', this.addAll, this );
 			window.app.Todos.on( 'reset', this.addAll, this );
-			window.app.Todos.on( 'change:completed', this.addAll, this );
-			window.app.Todos.on( 'all', this.render, this );
+			window.app.Todos.on('change:completed', this.filterOne, this);
+			window.app.Todos.on("filter", this.filterAll, this);
 
-			this.$footer = this.$('#footer');
-			this.$main = this.$('#main');
+			window.app.Todos.on( 'all', this.render, this );
 
 			app.Todos.fetch();
 		},
@@ -78,18 +79,15 @@ $(function( $ ) {
 		// Add all items in the **Todos** collection at once.
 		addAll: function() {
 			this.$('#todo-list').html('');
+			app.Todos.each(this.addOne, this);
+		},
 
-			switch( app.TodoFilter ) {
-				case 'active':
-					_.each( app.Todos.remaining(), this.addOne );
-					break;
-				case 'completed':
-					_.each( app.Todos.completed(), this.addOne );
-					break;
-				default:
-					app.Todos.each( this.addOne, this );
-					break;
-			}
+		filterOne : function (todo) {
+			todo.trigger("visible");
+		},
+
+		filterAll : function () {
+			app.Todos.each(this.filterOne, this);
 		},
 
 		// Generate the attributes for a new Todo item.

architecture-examples/backbone/js/views/todos.js

@@ -30,6 +30,7 @@ $(function() {
 		initialize: function() {
 			this.model.on( 'change', this.render, this );
 			this.model.on( 'destroy', this.remove, this );
+			this.model.on( 'visible', this.toggleVisible, this );
 		},
 
 		// Re-render the titles of the todo item.
@@ -37,10 +38,23 @@ $(function() {
 			this.$el.html( this.template( this.model.toJSON() ) );
 			this.$el.toggleClass( 'completed', this.model.get('completed') );
 
+			this.toggleVisible();
 			this.input = this.$('.edit');
 			return this;
 		},
 
+		toggleVisible : function () {
+			this.$el.toggleClass( 'hidden',  this.isHidden());
+		},
+
+		isHidden : function () {
+			var isCompleted = this.model.get('completed');
+			return ( // hidden cases only
+				(!isCompleted && app.TodoFilter === 'completed')
+				|| (isCompleted && app.TodoFilter === 'active')
+			);
+		},
+
 		// Toggle the `"completed"` state of the model.
 		togglecompleted: function() {
 			this.model.toggle();

assets/base.css

@@ -404,3 +404,7 @@ label[for='toggle-all'] {
 		background: none;
 	}
 }
+
+.hidden{
+	display:none;
+}
\ No newline at end of file

dependency-examples/backbone_require/js/routers/router.js

@@ -14,8 +14,9 @@ define([
 			// Set the current filter to be used
 			Common.TodoFilter = param.trim() || '';
 
-			// Trigger a collection reset/addAll
-			Todos.trigger('reset');
+			// Trigger a collection filter event, causing hiding/unhiding
+			// of the Todo view items
+			Todos.trigger('filter');
 		}
 	});
 

dependency-examples/backbone_require/js/views/app.js

@@ -33,10 +33,12 @@ define([
 			this.$footer = this.$('#footer');
 			this.$main = this.$('#main');
 
-			Todos.on( 'add', this.addAll, this );
+			Todos.on( 'add', this.addOne, this );
 			Todos.on( 'reset', this.addAll, this );
-			Todos.on( 'change:completed', this.addAll, this );
+			Todos.on( 'change:completed', this.filterOne, this );
+			Todos.on( "filter", this.filterAll, this);
 			Todos.on( 'all', this.render, this );
+
 			Todos.fetch();
 		},
 
@@ -77,20 +79,17 @@ define([
 		// Add all items in the **Todos** collection at once.
 		addAll: function() {
 			this.$('#todo-list').html('');
+			Todos.each(this.addOne, this);
+		},
 
-			switch( Common.TodoFilter ) {
-				case 'active':
-					_.each( Todos.remaining(), this.addOne );
-					break;
-				case 'completed':
-					_.each( Todos.completed(), this.addOne );
-					break;
-				default:
-					Todos.each( this.addOne, this );
-					break;
-			}
+		filterOne : function (todo) {
+			todo.trigger("visible");
 		},
 
+		filterAll : function () {
+			app.Todos.each(this.filterOne, this);
+		},
+		
 		// Generate the attributes for a new Todo item.
 		newAttributes: function() {
 			return {

dependency-examples/backbone_require/js/views/todos.js

@@ -27,6 +27,7 @@ define([
 		initialize: function() {
 			this.model.on( 'change', this.render, this );
 			this.model.on( 'destroy', this.remove, this );
+			this.model.on( 'visible', this.toggleVisible, this );
 		},
 
 		// Re-render the titles of the todo item.
@@ -34,10 +35,23 @@ define([
 			this.$el.html( this.template( this.model.toJSON() ) );
 			this.$el.toggleClass( 'completed', this.model.get('completed') );
 
+			this.toggleVisible();
 			this.input = this.$('.edit');
 			return this;
 		},
 
+		toggleVisible : function () {
+			this.$el.toggleClass( 'hidden',  this.isHidden());
+		},
+
+		isHidden : function () {
+			var isCompleted = this.model.get('completed');
+			return ( // hidden cases only
+				(!isCompleted && Common.TodoFilter === 'completed')
+				|| (isCompleted && Common.TodoFilter === 'active')
+			);
+		},
+
 		// Toggle the `"completed"` state of the model.
 		togglecompleted: function() {
 			this.model.toggle();