Close GH-991: Fix Marionette Example to comply to spec 100%.

labs/architecture-examples/backbone_marionette/bower.json

@@ -6,6 +6,6 @@
     "todomvc-common": "~0.1.7",
     "underscore": "~1.4.4",
     "backbone.localStorage": "~1.1.6",
-    "backbone.marionette": "~1.0.4"
+    "backbone.marionette": "~2.1.0"
   }
 }

labs/architecture-examples/backbone_marionette/index.html

@@ -27,13 +27,13 @@
 			</span>
 			<ul id="filters">
 				<li class="all">
-					<a href="#">All</a>
+					<a href="#/">All</a>
 				</li>
 				<li class="active">
-					<a href="#active">Active</a>
+					<a href="#/active">Active</a>
 				</li>
 				<li class="completed">
-					<a href="#completed">Completed</a>
+					<a href="#/completed">Completed</a>
 				</li>
 			</ul>
 			<button id="clear-completed" <% if (!completedCount) { %>class="hidden"<% } %>>

labs/architecture-examples/backbone_marionette/js/TodoMVC.Layout.js

@@ -60,7 +60,7 @@ TodoMVC.module('Layout', function (Layout, App, Backbone) {
 		},
 
 		initialize: function () {
-			this.listenTo(App.vent, 'todoList:filter', this.updateFilterSelection, this);
+			this.listenTo(App.request('filterState'), 'change:filter', this.updateFilterSelection, this);
 		},
 
 		serializeData: function () {
@@ -80,9 +80,8 @@ TodoMVC.module('Layout', function (Layout, App, Backbone) {
 		},
 
 		updateFilterSelection: function () {
-			this.ui.filters
-				.removeClass('selected')
-				.filter('[href="' + (location.hash || '#') + '"]')
+			this.ui.filters.removeClass('selected');
+			this.ui[App.request('filterState').get('filter')]
 			.addClass('selected');
 		},
 

labs/architecture-examples/backbone_marionette/js/TodoMVC.TodoList.Views.js

@@ -16,7 +16,7 @@ TodoMVC.module('TodoList.Views', function (Views, App, Backbone, Marionette, $)
 		},
 
 		events: {
-			'click .destroy': 'destroy',
+			'click .destroy': 'deleteModel',
 			'dblclick label': 'onEditClick',
 			'keydown .edit': 'onEditKeypress',
 			'focusout .edit': 'onEditFocusout',
@@ -37,7 +37,7 @@ TodoMVC.module('TodoList.Views', function (Views, App, Backbone, Marionette, $)
 			}
 		},
 
-		destroy: function () {
+		deleteModel: function () {
 			this.model.destroy();
 		},
 
@@ -83,8 +83,8 @@ TodoMVC.module('TodoList.Views', function (Views, App, Backbone, Marionette, $)
 	// filtering of activs vs completed items for display.
 	Views.ListView = Backbone.Marionette.CompositeView.extend({
 		template: '#template-todoListCompositeView',
-		itemView: Views.ItemView,
-		itemViewContainer: '#todo-list',
+		childView: Views.ItemView,
+		childViewContainer: '#todo-list',
 
 		ui: {
 			toggle: '#toggle-all'
@@ -98,6 +98,18 @@ TodoMVC.module('TodoList.Views', function (Views, App, Backbone, Marionette, $)
 			'all': 'update'
 		},
 
+		initialize: function () {
+			this.listenTo(App.request('filterState'), 'change:filter', this.render, this);
+		},
+
+		addChild: function (child) {
+			var filteredOn = App.request('filterState').get('filter');
+
+			if (child.matchesFilter(filteredOn)) {
+				Backbone.Marionette.CompositeView.prototype.addChild.apply(this, arguments);
+			}
+		},
+
 		onRender: function () {
 			this.update();
 		},
@@ -121,14 +133,4 @@ TodoMVC.module('TodoList.Views', function (Views, App, Backbone, Marionette, $)
 			});
 		}
 	});
-
-	// Application Event Handlers
-	// --------------------------
-	//
-	// Handler for filtering the list of items by showing and
-	// hiding through the use of various CSS classes
-	App.vent.on('todoList:filter', function (filter) {
-		filter = filter || 'all';
-		$('#todoapp').attr('class', 'filter-' + filter);
-	});
 });

labs/architecture-examples/backbone_marionette/js/TodoMVC.TodoList.js

@@ -53,7 +53,8 @@ TodoMVC.module('TodoList', function (TodoList, App, Backbone, Marionette, $, _)
 
 		// Set the filter to show complete or all items
 		filterItems: function (filter) {
-			App.vent.trigger('todoList:filter', (filter && filter.trim()) || '');
+			var newFilter = filter && filter.trim() || 'all';
+			App.request('filterState').set('filter', newFilter);
 		}
 	});
 

labs/architecture-examples/backbone_marionette/js/TodoMVC.Todos.js

@@ -23,6 +23,18 @@ TodoMVC.module('Todos', function (Todos, App, Backbone) {
 
 		isCompleted: function () {
 			return this.get('completed');
+		},
+
+		matchesFilter: function (filter) {
+			if (filter == 'all') {
+				return true;
+			}
+
+			if (filter == 'active') {
+				return !this.isCompleted();
+			}
+
+			return this.isCompleted();
 		}
 	});
 

labs/architecture-examples/backbone_marionette/js/TodoMVC.js

@@ -5,12 +5,22 @@
 // and functional testing.
 window.TodoMVC = new Backbone.Marionette.Application();
 
+(function () {
+  var filterState = new Backbone.Model({
+    filter: 'all'
+  });
+
+  TodoMVC.reqres.setHandler('filterState', function () {
+    return filterState;
+  });
+})();
+
 TodoMVC.addRegions({
 	header: '#header',
 	main: '#main',
 	footer: '#footer'
 });
 
-TodoMVC.on('initialize:after', function () {
+TodoMVC.on('start', function () {
 	Backbone.history.start();
 });