emberjs · izhan · Mar 15, 2013 · Mar 16, 2013 · Mar 15, 2013 · Mar 15, 2013
diff --git a/index.html b/index.html
@@ -6,6 +6,21 @@
   <link rel="stylesheet" href="style.css">
 </head>
 <body>
+  <script type="text/x-handlebars" data-template-name="todos/index">
+  <ul id="todo-list">
+    {{#each itemController="todo"}}
+      <li {{bind-attr class="isCompleted:completed isEditing:editing"}}>
+        {{#if isEditing}}
+          {{edit-todo class="edit" value=title focus-out="acceptChanges" insert-newline="acceptChanges"}}
+        {{else}}
+          {{input type="checkbox" checked=isCompleted class="toggle"}}
+          <label {{action "editTodo" on="doubleClick"}}>{{title}}</label><button {{action "removeTodo"}} class="destroy"></button>
+        {{/if}}
+      </li>
+    {{/each}}
+  </ul>
+  </script>
+
   <script type="text/x-handlebars" data-template-name="todos">
 
   <section id="todoapp">
@@ -16,40 +31,30 @@ <h1>todos</h1>
     </header>
 
       <section id="main">
-        <ul id="todo-list">
-          {{#each itemController="todo"}}
-            <li {{bind-attr class="isCompleted:completed isEditing:editing"}}>
-              {{#if isEditing}}
-                <input class='edit'>
-              {{else}}
-                {{input type="checkbox" checked=isCompleted class="toggle"}}
-                <label {{action "editTodo" on="doubleClick"}}>{{title}}</label><button class="destroy"></button>
-              {{/if}}
-            </li>
-          {{/each}}
-        </ul>
-
-        <input type="checkbox" id="toggle-all">
+        {{outlet}}
+        {{input type="checkbox" id="toggle-all" checked=allAreDone}}
       </section>
 
       <footer id="footer">
         <span id="todo-count">
           <strong>{{remaining}}</strong> {{inflection}} left</span>
         <ul id="filters">
           <li>
-            <a href="all" class="selected">All</a>
+            {{#link-to "todos.index" activeClass="selected"}}All{{/link-to}}
           </li>
           <li>
-            <a href="active">Active</a>
+            {{#link-to "todos.active" activeClass="selected"}}Active{{/link-to}}
           </li>
           <li>
-            <a href="completed">Completed</a>
+            {{#link-to "todos.completed" activeClass="selected"}}Completed{{/link-to}}
           </li>
         </ul>
 
-        <button id="clear-completed">
-          Clear completed (1)
-        </button>
+        {{#if hasCompleted}}
+          <button id="clear-completed" {{action "clearCompleted"}}>
+            Clear completed ({{completed}})
+          </button>
+        {{/if}}
       </footer>
   </section>
 
@@ -63,10 +68,12 @@ <h1>todos</h1>
   <script src="js/libs/handlebars.js"></script>
   <script src="js/libs/ember.js"></script>
   <script src="js/libs/ember-data.js"></script>
+  <script src="js/libs/local_storage_adapter.js"></script>
   <script src="js/app.js"></script>
   <script src="js/router.js"></script>
   <script src="js/models/todo.js"></script>
   <script src="js/controllers/todos_controller.js"></script>
   <script src="js/controllers/todo_controller.js"></script>
+  <script src="js/views/edit_todo_view.js"></script>
 </body>
 </html>
diff --git a/js/app.js b/js/app.js
@@ -1,3 +1,5 @@
 window.Todos = Ember.Application.create();
 
-Todos.ApplicationAdapter = DS.FixtureAdapter.extend();
+Todos.ApplicationAdapter = DS.LSAdapter.extend({
+  namespace: 'todos-emberjs'
+});
diff --git a/js/controllers/todo_controller.js b/js/controllers/todo_controller.js
@@ -2,6 +2,22 @@ Todos.TodoController = Ember.ObjectController.extend({
   actions: {
     editTodo: function () {
       this.set('isEditing', true);
+    },
+    acceptChanges: function () {
+      if (this.get('isEditing')) {
+        this.set('isEditing', false);
+
+        if (Ember.isEmpty(this.get('model.title'))) {
+          this.send('removeTodo');
+        } else {
+          this.get('model').save();
+        }
+      }
+    },
+    removeTodo: function () {
+      var todo = this.get('model');
+      todo.deleteRecord();
+      todo.save();
     }
   },
 

diff --git a/js/controllers/todos_controller.js b/js/controllers/todos_controller.js
@@ -16,6 +16,11 @@ Todos.TodosController = Ember.ArrayController.extend({
 
       // Save the new model
       todo.save();
+    },
+    clearCompleted: function () {
+      var completed = this.filterProperty('isCompleted', true);
+      completed.invoke('deleteRecord');
+      completed.invoke('save');
     }
   },
 
@@ -26,5 +31,23 @@ Todos.TodosController = Ember.ArrayController.extend({
   inflection: function () {
     var remaining = this.get('remaining');
     return remaining === 1 ? 'item' : 'items';
-  }.property('remaining')
+  }.property('remaining'),
+
+  hasCompleted: function () {
+    return this.get('completed') > 0;
+  }.property('completed'),
+
+  completed: function () {
+    return this.filterProperty('isCompleted', true).get('length');
+  }.property('@each.isCompleted'),
+
+  allAreDone: function (key, value) {
+    if (value === undefined) {
+      return !!this.get('length') && this.everyProperty('isCompleted', true);
+    } else {
+      this.setEach('isCompleted', value);
+      this.invoke('save')
+      return value;
+    }
+  }.property('@each.isCompleted')
 });
diff --git a/js/router.js b/js/router.js
@@ -1,9 +1,41 @@
 Todos.Router.map(function () {
-  this.resource('todos', { path: '/' });
+  this.resource('todos', { path: '/' }, function () {
+    // additional child routes    
+    this.route('active');
+    this.route('completed');
+  });
 });
 
 Todos.TodosRoute = Ember.Route.extend({
   model: function () {
     return this.store.find('todo');
   }
 });
+
+Todos.TodosIndexRoute = Ember.Route.extend({
+  model: function () {
+    return this.modelFor('todos');
+  }
+});
+
+Todos.TodosActiveRoute = Ember.Route.extend({
+  model: function(){
+    return this.store.filter('todo', function (todo) {
+      return !todo.get('isCompleted');
+    });
+  },
+  renderTemplate: function(controller){
+    this.render('todos/index', {controller: controller});
+  }
+});
+
+Todos.TodosCompletedRoute = Ember.Route.extend({
+  model: function(){
+    return this.store.filter('todo', function (todo) {
+      return todo.get('isCompleted');
+    });
+  },
+  renderTemplate: function(controller){
+    this.render('todos/index', {controller: controller});
+  }
+});
diff --git a/js/views/edit_todo_view.js b/js/views/edit_todo_view.js
@@ -0,0 +1,7 @@
+Todos.EditTodoView = Ember.TextField.extend({
+  didInsertElement: function () {
+    this.$().focus();
+  }
+});
+
+Ember.Handlebars.helper('edit-todo', Todos.EditTodoView);