Ember app: Improved routing

architecture-examples/emberjs/index.html

@@ -34,13 +34,13 @@
 	<script id="filtersTemplate" type="text/x-handlebars">
 		<ul id="filters">
 			<li>
-				<a {{action showAll href=true}}>All </a>
+				<a {{action showAll href=true}} {{bindAttr class="view.isAll:selected"}}>All</a>
 			</li>
 			<li>
-				<a {{action showActive href=true}}>Active</a>
+				<a {{action showActive href=true}} {{bindAttr class="view.isActive:selected"}}>Active</a>
 			</li>
 			<li>
-				<a {{action showCompleted href=true}}>Completed</a>
+				<a {{action showCompleted href=true}} {{bindAttr class="view.isCompleted:selected"}}>Completed</a>
 			</li>
 		</ul>
 	</script>

architecture-examples/emberjs/js/views/application.js

@@ -58,6 +58,16 @@
 			}),
 			filtersView: Ember.View.create({
 				templateName: 'filtersTemplate',
+				filterBinding: 'controller.namespace.entriesController.filterBy',
+				isAll: function() {
+					return !!Ember.empty( this.get('filter') );
+				}.property( 'filter' ),
+				isActive: function() {
+					return !!( this.get('filter') === 'active' );
+				}.property('filter'),
+				isCompleted: function() {
+					return !!( this.get('filter') === 'completed' );
+				}.property('filter')
 			}),
 			clearBtnView: Ember.View.create({
 				entriesBinding: 'controller.namespace.entriesController',