Closes #275: Update Agility.js app. Fixes #257

a52a4fc2 · tosh shimayama · Sindre Sorhus · b26fccea · a52a4fc2 · a52a4fc2
Commit a52a4fc2 authored Sep 04, 2012 by tosh shimayama Committed by Sindre Sorhus Sep 04, 2012
Showing with 29 additions and 16 deletions

architecture-examples/agilityjs/index.html architecture-examples/agilityjs/index.html +2 -1

architecture-examples/agilityjs/js/app.js architecture-examples/agilityjs/js/app.js +27 -15

No files found.
--- a/architecture-examples/agilityjs/index.html
+++ b/architecture-examples/agilityjs/index.html
@@ -2,6 +2,7 @@
 <html lang="en">
 <head>
 	<meta charset="utf-8">
+	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 	<title>Agility.js • TodoMVC</title>
 	<link rel="stylesheet" href="../../assets/base.css">
 	<!--[if IE]>
@@ -16,7 +17,7 @@
 		</header>
 		<section id="main" data-bind="class = mainStyle">
 			<input id="toggle-all" type="checkbox">
-			<label for="toggle-all">Mark all as completed</label>
+			<label for="toggle-all">Mark all as complete</label>
 			<ul id="todo-list">
 				<li>
 					<div class="view">

--- a/architecture-examples/agilityjs/js/app.js
+++ b/architecture-examples/agilityjs/js/app.js
@@ -26,7 +26,7 @@
 					this.view.$().toggleClass( 'completed', this.model.get('completed') );
 					app.updateStatus();
 				},
-				'dblclick label': function() {
+				'dblclick &': function() {
 					this.view.$().addClass('editing');
 					this.view.$('.edit').focus();
 				},
@@ -42,17 +42,25 @@
 				'destroy': function() {
 					this.erase();
 				},
-				'change:title': function() {
-					this.view.$().removeClass('editing');
-					var title = this.model.get('title').trim();
-					if ( title ) {
-						this.model.set({
-							title: title
-						});
-					} else {
-						this.destroy();
+				'blur input': function() {
+					this.updateTitle();
+				},
+				'keyup input': function() {
+					if ( event.which === ENTER_KEY ) {
+						this.updateTitle();
 					}
 				}
+			},
+			updateTitle: function() {
+				this.view.$().removeClass('editing');
+				var title = this.model.get('title').trim();
+				if ( title ) {
+					this.model.set({
+						title: title
+					});
+				} else {
+					this.destroy();
+				}
 			}
 		}).persist( $$.adapter.localStorage, {
 			collection: 'todos-agilityjs'
@@ -117,13 +125,15 @@
 				});
 				this.model.set({
 					todoCount: count - completedCount + '',
-					pluralizer: (count > 1 ? 's' : ''),
+					pluralizer: (count - completedCount === 1 ? '' : 's'),
 					completedCount: completedCount + '',
 					mainStyle: (count === 0 ? 'hidden' : ''),
 					clearBtnStyle: (completedCount === 0 ? 'hidden' : '')
 				});
 				// update toggle-all checked status
 				$('#toggle-all').prop( 'checked', completedCount === count );
+				// update the view according to the current filter.
+				this.applyFilter();
 			},
 			// filter handler
 			filters: {
@@ -138,10 +148,12 @@
 				}
 			},
 			applyFilter: function( hash ) {
-				var isVisible = this.filters[hash];
-				this.each(function( id, item ) {
-					item.view.$().toggleClass( 'hidden', !isVisible( item ) );
-				});
+				var isVisible = this.filters[hash || location.hash];
+				if ( isVisible ) {
+					this.each(function( id, item ) {
+						item.view.$().toggleClass( 'hidden', !isVisible( item ) );
+					});
+				}
 			}
 		}).persist();
 		$$.document.prepend( app );