Merge pull request #558 from thebakeryio/refactoring/update-count

Refactoring/update count

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