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

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>

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) {