From 5f742d2790792a035678c70786f70c525cd3334c Mon Sep 17 00:00:00 2001
From: callmephilip <philip.nuzhnyy@gmail.com>
Date: Mon, 13 May 2013 09:27:09 -0700
Subject: [PATCH] move logic from updateCount into the view rendering routine

update footer template to support declarative task stats rendering

adjust if block formatting

remove unnecessary escaping from the footer template

adjust variable declaration statements

adjust indentation in the footer template
---
 .../backbone_marionette/index.html            | 12 ++++--
 .../backbone_marionette/js/TodoMVC.Layout.js  | 42 +++++++++----------
 2 files changed, 28 insertions(+), 26 deletions(-)

diff --git a/labs/architecture-examples/backbone_marionette/index.html b/labs/architecture-examples/backbone_marionette/index.html
index 959947f6ef..2456050e30 100644
--- a/labs/architecture-examples/backbone_marionette/index.html
+++ b/labs/architecture-examples/backbone_marionette/index.html
@@ -23,10 +23,13 @@
 			<p>Further variations on the Backbone.Marionette app are also <a href="https://github.com/marionettejs/backbone.marionette/wiki/Projects-and-websites-using-marionette">available</a>.</p>
 		</footer>
 		<script type="text/html" id="template-footer">
-			<span id="todo-count"><strong></strong><span></span></span>
+			<span id="todo-count">
+				<strong><%= activeCount %></strong>
+				<span> <%= activeCountLabel() %></span>
+			</span>
 			<ul id="filters">
 				<li>
-					<a href="#">All</a>
+					<a href="#" class="selected">All</a>
 				</li>
 				<li>
 					<a href="#active">Active</a>
@@ -35,7 +38,10 @@
 					<a href="#completed">Completed</a>
 				</li>
 			</ul>
-			<button id="clear-completed"></button>
+
+			<% if (completedCount > 0) { %>
+				<button id="clear-completed">Clear completed (<%= completedCount %>)</button>
+			<% } %>
 		</script>
 		<script type="text/html" id="template-header">
 			<h1>todos</h1>
diff --git a/labs/architecture-examples/backbone_marionette/js/TodoMVC.Layout.js b/labs/architecture-examples/backbone_marionette/js/TodoMVC.Layout.js
index f76cb19860..1a6beaca06 100644
--- a/labs/architecture-examples/backbone_marionette/js/TodoMVC.Layout.js
+++ b/labs/architecture-examples/backbone_marionette/js/TodoMVC.Layout.js
@@ -38,10 +38,7 @@ TodoMVC.module('Layout', function (Layout, App, Backbone) {
 		// UI bindings create cached attributes that
 		// point to jQuery selected objects
 		ui: {
-			count: '#todo-count strong',
-			itemsString: '#todo-count span',
-			filters: '#filters a',
-			clearCompleted: '#clear-completed'
+			filters: '#filters a'
 		},
 
 		events: {
@@ -49,33 +46,32 @@ TodoMVC.module('Layout', function (Layout, App, Backbone) {
 		},
 
 		collectionEvents: {
-			'all': 'updateCount'
+			'all': 'render'
 		},
 
-		initialize: function () {
-			this.listenTo(App.vent, 'todoList:filter', this.updateFilterSelection, this);
+		templateHelpers: {
+			activeCountLabel : function(){
+				return (this.activeCount === 1 ? 'item' : 'items') + ' left';
+			}
 		},
 
-		onRender: function () {
-			this.updateCount();
+		initialize: function () {
+			this.listenTo(App.vent, 'todoList:filter', this.updateFilterSelection, this);
 		},
 
-		updateCount: function () {
-			var count = this.collection.getActive().length;
-			var length = this.collection.length;
-			var completed = length - count;
-
-			this.ui.count.html(count);
-			this.ui.itemsString.html(' ' + (count === 1 ? 'item' : 'items') + ' left');
-			this.$el.parent().toggle(length > 0);
+		serializeData : function(){
+			var active = this.collection.getActive().length;
+			var total = this.collection.length;
 
-			if (completed > 0) {
-				this.ui.clearCompleted.show();
-				this.ui.clearCompleted.html('Clear completed (' + completed + ')');
-			} else {
-				this.ui.clearCompleted.hide();
-			}
+			return {
+				activeCount : active,
+				totalCount : total,
+				completedCount : total - active
+			};
+		},
 
+		onRender: function () {
+			this.$el.parent().toggle(this.collection.length > 0);
 		},
 
 		updateFilterSelection: function (filter) {