Hide #main and #footer elements. Do it the Ember way!

dependency-examples/emberjs_require/js/app/controllers/entries.js

@@ -45,6 +45,10 @@ define('app/controllers/entries', [ 'ember' ],
 				return this.filterProperty( 'completed', true ).get( 'length' );
 			}.property( '@each.completed' ),
 
+			noneLeft: function() {
+				return this.get( 'total' ) === 0;
+			}.property( 'total' ),
+
 			allAreDone: function( key, value ) {
 				if ( value !== undefined ) {
 					this.setEach( 'completed', value );

dependency-examples/emberjs_require/js/app/controllers/todos.js

@@ -7,10 +7,6 @@ define('app/controllers/todos', [ 'ember' ],
 	function() {
 		return Ember.Controller.extend({
 
-			// Handle visibility of some elements as items totals change
-			visibilityObserver: function() {
-				$( '#main, #footer' ).toggle( !!this.getPath( 'content.total' ) );
-			}.observes( 'content.total' ),
 
 		});
 	}

dependency-examples/emberjs_require/js/app/views/application.js

@@ -41,6 +41,8 @@ define('app/views/application', [
 				mainView: Em.ContainerView.create({
 					elementId: 'main',
 					tagName: 'section',
+					visibilityBinding: 'controller.namespace.entriesController.noneLeft',
+					classNameBindings: [ 'visibility:hidden' ],
 					childViews: [ 'outletView', 'markAllChkbox' ],
 					outletView: Ember.View.create({
 						template: Ember.Handlebars.compile( '{{outlet}}' ),
@@ -54,6 +56,8 @@ define('app/views/application', [
 				footerView: Ember.ContainerView.create({
 					elementId: 'footer',
 					tagName: 'footer',
+					visibilityBinding: 'controller.namespace.entriesController.noneLeft',
+					classNameBindings: [ 'visibility:hidden' ],
 					childViews: [
 						StatsView.create(),
 						FiltersView.create(),