Merge pull request #1291 from tastejs/sjs/fix-marionette

Fix Marionette Issues

examples/backbone_marionette/css/app.css

@@ -2,9 +2,3 @@
 #todoapp.filter-completed #todo-list .active {
 	display: none;
 }
-
-#main,
-#footer {
-	display: none;
-}
-

examples/backbone_marionette/js/TodoMVC.Layout.js

@@ -39,8 +39,8 @@ TodoMVC.module('Layout', function (Layout, App, Backbone) {
 		},
 
 		onInputKeypress: function (e) {
-			var ENTER_KEY = 13,
-			todoText = this.ui.input.val().trim();
+			var ENTER_KEY = 13;
+			var todoText = this.ui.input.val().trim();
 
 			if (e.which === ENTER_KEY && todoText) {
 				this.collection.create({
@@ -72,7 +72,7 @@ TodoMVC.module('Layout', function (Layout, App, Backbone) {
 		},
 
 		collectionEvents: {
-			'all': 'render'
+			all: 'render'
 		},
 
 		templateHelpers: {

examples/backbone_marionette/js/TodoMVC.TodoList.Views.js

@@ -10,6 +10,9 @@ TodoMVC.module('TodoList.Views', function (Views, App, Backbone, Marionette) {
 	Views.ItemView = Marionette.ItemView.extend({
 		tagName: 'li',
 		template: '#template-todoItemView',
+		className: function () {
+			return this.model.get('completed') ? 'completed' : 'active';
+		},
 
 		ui: {
 			edit: '.edit',
@@ -27,17 +30,7 @@ TodoMVC.module('TodoList.Views', function (Views, App, Backbone, Marionette) {
 		},
 
 		modelEvents: {
-			'change': 'render'
-		},
-
-		onRender: function () {
-			this.$el.removeClass('active completed');
-
-			if (this.model.get('completed')) {
-				this.$el.addClass('completed');
-			} else {
-				this.$el.addClass('active');
-			}
+			change: 'render'
 		},
 
 		deleteModel: function () {
@@ -65,7 +58,8 @@ TodoMVC.module('TodoList.Views', function (Views, App, Backbone, Marionette) {
 		},
 
 		onEditKeypress: function (e) {
-			var ENTER_KEY = 13, ESC_KEY = 27;
+			var ENTER_KEY = 13;
+			var ESC_KEY = 27;
 
 			if (e.which === ENTER_KEY) {
 				this.onEditFocusout();
@@ -98,32 +92,25 @@ TodoMVC.module('TodoList.Views', function (Views, App, Backbone, Marionette) {
 		},
 
 		collectionEvents: {
-			'all': 'update'
+			'change:completed': 'render',
+			all: 'setCheckAllState'
 		},
 
 		initialize: function () {
 			this.listenTo(App.request('filterState'), 'change:filter', this.render, this);
 		},
 
-		addChild: function (child) {
+		filter: function (child) {
 			var filteredOn = App.request('filterState').get('filter');
-
-			if (child.matchesFilter(filteredOn)) {
-				Backbone.Marionette.CompositeView.prototype.addChild.apply(this, arguments);
-			}
+			return child.matchesFilter(filteredOn);
 		},
 
-		onRender: function () {
-			this.update();
-		},
-
-		update: function () {
+		setCheckAllState: function () {
 			function reduceCompleted(left, right) {
 				return left && right.get('completed');
 			}
 
 			var allCompleted = this.collection.reduce(reduceCompleted, true);
-
 			this.ui.toggle.prop('checked', allCompleted);
 			this.$el.parent().toggle(!!this.collection.length);
 		},
@@ -132,7 +119,7 @@ TodoMVC.module('TodoList.Views', function (Views, App, Backbone, Marionette) {
 			var isChecked = e.currentTarget.checked;
 
 			this.collection.each(function (todo) {
-				todo.save({ 'completed': isChecked });
+				todo.save({ completed: isChecked });
 			});
 		}
 	});

examples/backbone_marionette/js/TodoMVC.TodoList.js

@@ -17,19 +17,24 @@ TodoMVC.module('TodoList', function (TodoList, App, Backbone, Marionette) {
 	//
 	// Control the workflow and logic that exists at the application
 	// level, above the implementation detail of views and models
-    TodoList.Controller = Marionette.Controller.extend({
-        initialize: function () {
-            this.todoList = new App.Todos.TodoList();
-        },
+	TodoList.Controller = Marionette.Controller.extend({
+		initialize: function () {
+			this.todoList = new App.Todos.TodoList();
+		},
 		// Start the app by showing the appropriate views
 		// and fetching the list of todo items, if there are any
 		start: function () {
 			this.showHeader(this.todoList);
 			this.showFooter(this.todoList);
 			this.showTodoList(this.todoList);
+			this.todoList.on('all', this.updateHiddenElements, this);
 			this.todoList.fetch();
 		},
 
+		updateHiddenElements: function () {
+			$('#main, #footer').toggle(!!this.todoList.length);
+		},
+
 		showHeader: function (todoList) {
 			var header = new App.Layout.Header({
 				collection: todoList

examples/backbone_marionette/js/TodoMVC.js

@@ -4,23 +4,23 @@
 // TodoMVC is global for developing in the console
 // and functional testing.
 var App = Backbone.Marionette.Application.extend({
-  setRootLayout: function() {
-    this.root = new TodoMVC.Layout.Root();
-  }
+	setRootLayout: function () {
+		this.root = new TodoMVC.Layout.Root();
+	}
 });
 
 window.TodoMVC = new App();
 
 (function () {
-  var filterState = new Backbone.Model({
-    filter: 'all'
-  });
+	var filterState = new Backbone.Model({
+		filter: 'all'
+	});
 
-  TodoMVC.reqres.setHandler('filterState', function () {
-    return filterState;
-  });
+	TodoMVC.reqres.setHandler('filterState', function () {
+		return filterState;
+	});
 })();
 
 TodoMVC.on('before:start', function () {
-  TodoMVC.setRootLayout();
+	TodoMVC.setRootLayout();
 });