jQuery: Use templating on the footer too

architecture-examples/jquery/css/app.css

@@ -0,0 +1,4 @@
+#main,
+#footer {
+	display: none;
+}

architecture-examples/jquery/index.html

@@ -5,6 +5,7 @@
 	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 	<title>jQuery • TodoMVC</title>
 	<link rel="stylesheet" href="../../assets/base.css">
+	<link rel="stylesheet" href="css/app.css">
 	<!--[if IE]>
 	<script src="../../assets/ie.js"></script>
 	<![endif]-->
@@ -30,7 +31,7 @@ <h1>todos</h1>
 		<p>App and template by <a href="http://github.com/sindresorhus">Sindre Sorhus</a></p>
 		<p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
 	</footer>
-	<script type="text/x-handlebars-template" id="todo-template">
+	<script id="todo-template" type="text/x-handlebars-template">
 	{{#this}}
 	<li {{#if completed}}class="completed"{{/if}} data-id="{{id}}">
 		<div class="view">
@@ -42,6 +43,10 @@ <h1>todos</h1>
 	</li>
 	{{/this}}
 	</script>
+	<script id="footer-template" type="text/x-handlebars-template">
+	<span id="todo-count"><strong>{{activeTodoCount}}</strong> {{activeTodoWord}} left</span>
+	{{#if completedTodos}}<button id="clear-completed">Clear completed ({{completedTodos}})</button>{{/if}}
+	</script>
 	<script src="../../assets/base.js"></script>
 	<script src="../../assets/jquery.min.js"></script>
 	<script src="../../assets/handlebars.min.js"></script>

architecture-examples/jquery/js/app.js

@@ -19,7 +19,8 @@ jQuery(function( $ ) {
 			this.render();
 		},
 		cacheElements: function() {
-			this.template = Handlebars.compile( $('#todo-template').html() );
+			this.todoTemplate = Handlebars.compile( $('#todo-template').html() );
+			this.footerTemplate = Handlebars.compile( $('#footer-template').html() );
 			this.$todoApp = $('#todoapp');
 			this.$newTodo = $('#new-todo');
 			this.$toggleAll = $('#toggle-all');
@@ -41,32 +42,31 @@ jQuery(function( $ ) {
 			var list = this.$todoList;
 			this.$newTodo.on( 'keyup', this.create );
 			this.$toggleAll.on( 'change', this.toggleAll );
-			this.$clearBtn.on( 'click', this.destroyCompleted );
+			this.$footer.on( 'click', '#clear-completed', this.destroyCompleted );
 			list.on( 'change', '.toggle', this.toggle );
 			list.on( 'dblclick', '.view', this.edit );
 			list.on( 'keypress', '.edit', this.blurOnEnter );
 			list.on( 'blur', '.edit', this.update );
 			list.on( 'click', '.destroy', this.destroy );
 		},
 		render: function() {
-			this.$todoList.html( this.template( this.todos ) );
+			this.$todoList.html( this.todoTemplate( this.todos ) );
 			this.$main.toggle( !!this.todos.length );
 			this.$toggleAll.prop( 'checked', !this.activeTodoCount() );
 			this.renderFooter();
 			this.store( this.todos );
 		},
 		renderFooter: function() {
 			var todoCount = this.todos.length,
-				activeTodos = this.activeTodoCount(),
-				completedTodos = todoCount - activeTodos,
-				countTitle = '<strong>' + activeTodos + '</strong> ' + Utils.pluralize( activeTodos, 'item' ) + ' left',
-				clearTitle = 'Clear completed (' + completedTodos + ')';
-			// Only show the footer when there are at least one todo.
+				activeTodoCount = this.activeTodoCount(),
+				footer = {
+					activeTodoCount: activeTodoCount,
+					activeTodoWord: Utils.pluralize( activeTodoCount, 'item' ),
+					completedTodos: todoCount - activeTodoCount
+				};
+
 			this.$footer.toggle( !!todoCount );
-			// Active todo count
-			this.$count.html( countTitle );
-			// Toggle clear button and update title
-			this.$clearBtn.text( clearTitle ).toggle( !!completedTodos );
+			this.$footer.html( this.footerTemplate( footer ) );
 		},
 		toggleAll: function() {
 			var isChecked = $( this ).prop('checked');