Checkbox actions up bindings down

app/adapters/application.js

@@ -25,7 +25,7 @@ export default DS.Adapter.extend({
 
   createRecord(store, type, record) {
     // rather then doing an ajax, just echo back the data that was created
-    var json = record.toJSON();
+    var json = record;
 
     // assign a unique ID like the server word
     json.id = Date.now();
@@ -36,7 +36,7 @@ export default DS.Adapter.extend({
 
   updateRecord(store, type, record) {
     // rather then doing an ajax, just echo back the data that was updated
-    var json = record.toJSON();
+    var json = record;
 
     json.id = record.id;
 

app/components/todo-checkbox/component.js

@@ -0,0 +1,32 @@
+import Ember from 'ember';
+
+export default Ember.Component.extend({
+  tagName: 'input',
+  classNames: ['todo-checkbox'],
+  attributeBindings: [
+    'type',
+    'checked',
+    'indeterminate',
+    'disabled',
+    'tabindex',
+    'name',
+    'autofocus',
+    'required',
+    'form'
+  ],
+
+  type: 'checkbox',
+  checked: false,
+  disabled: false,
+  indeterminate: false,
+
+  didInsertElement() {
+    this.get('element').indeterminate = !!this.get('indeterminate');
+  },
+
+  change() {
+    var checked = this.$().prop('checked');
+    // this.set('checked', checked);
+    this.sendAction('action', checked);
+  }
+});

app/components/todo-item/component.js

@@ -4,6 +4,9 @@ export default Ember.Component.extend({
   tagName: 'li',
   classNameBindings: ['todo.isCompleted:completed', 'isEditing:editing'],
 
+  isCompleted: Ember.computed.oneWay('todo.isCompleted'),
+  title: Ember.computed.oneWay('todo.title'),
+
   init() {
     this._super(...arguments);
     this.set('isEditing', false);
@@ -15,15 +18,16 @@ export default Ember.Component.extend({
     },
 
     removeTodo() {
-      var todo = this.get('todo');
-
-      todo.deleteRecord();
-      todo.save();
+      this.sendAction('actionDeleteTodo', this.get('todo'));
     },
 
-    save() {
+    titleChange() {
       this.set('isEditing', false);
-      this.get('todo').save();
+      this.sendAction('actionPatchTodo', this.get('todo'), 'title', this.get('title'));
+    },
+
+    isCompletedChange(checked) {
+      this.sendAction('actionPatchTodo', this.get('todo'), 'isCompleted', checked);
     }
   },
-});
+});

app/components/todo-item/template.hbs

@@ -1,9 +1,12 @@
 {{#if isEditing}}
-  {{edit-todo class='edit' value=todo.title
-                           focus-out='save'
-                           insert-newline='save'}}
+  {{edit-todo class='edit' 
+              value=title
+              focus-out='titleChange'
+              insert-newline='titleChange'}}
 {{else}}
-  {{input type='checkbox' checked=todo.isCompleted class='toggle'}}
-  <label {{action 'editTodo' on='doubleClick'}}>{{todo.title}}</label>
+  {{todo-checkbox class="toggle" 
+                  checked=isCompleted
+                  action='isCompletedChange'}}
+  <label {{action 'editTodo' on='doubleClick'}}>{{title}}</label>
   <button {{action 'removeTodo'}} class='destroy'></button>
 {{/if}}

app/components/todos-list/component.js

@@ -2,4 +2,12 @@ import Ember from 'ember';
 
 export default Ember.Component.extend({
   tagName: 'ul',
+  actions: {
+    patchTodo(todo, propertyName, propertyValue) {
+      this.sendAction('actionPatchTodo', todo, propertyName, propertyValue);
+    },
+    deleteTodo(todo) {
+      this.sendAction('actionDeleteTodo', todo);
+    }
+  }
 });

app/components/todos-list/template.hbs

@@ -1,4 +1,6 @@
 {{#each todos as |todo|}}
-  {{todo-item todo=todo}}
+  {{todo-item todo=todo 
+              actionPatchTodo='patchTodo' 
+              actionDeleteTodo='deleteTodo'}}
 {{/each}}
 

app/components/todos-route/component.js

@@ -1,8 +1,8 @@
 import Ember from 'ember';
 
 var isEmpty = Ember.isEmpty;
-var filterBy = Ember.computed.filterBy;
 var computed = Ember.computed;
+var filterBy = computed.filterBy;
 
 export default Ember.Component.extend({
   filtered: computed('[email protected]', 'filter', function() {
@@ -22,19 +22,26 @@ export default Ember.Component.extend({
     return active === 1 ? 'item' : 'items';
   }).readOnly(),
 
-  allAreDone: computed('[email protected]', function (key, value) {
-    if (arguments.length === 2) {
-      // TODO: use action instead of a 2 way CP.
-      var todos = this.get('active');
-      todos.setEach('isCompleted', value);
-      todos.invoke('save');
-      return value;
-    } else {
-      return !isEmpty(this) && this.get('length') === this.get('completed.length');
-    }
+  allAreDone: computed('[email protected]', function() {
+    return isEmpty(this.get('active'));
   }),
 
   actions: {
+    allAreDoneChange(checked) {
+      var todos = this.get('todos').filterBy('isCompleted', !checked);
+      todos.setEach('isCompleted', checked);
+      todos.invoke('save');
+    },
+
+    patchTodo(todo, propertyName, propertyValue) {
+      todo.set(propertyName, propertyValue);
+      todo.save();
+    },
+
+    deleteTodo(todo) {
+      todo.destroyRecord();
+    },
+
     createTodo() {
       // Get the todo title set by the "New Todo" text field
       var title = this.get('newTitle');
@@ -61,8 +68,7 @@ export default Ember.Component.extend({
       var completed = this.get('completed');
 
       completed.toArray(). // clone the array, so it is not bound while we iterate over and delete.
-        invoke('deleteRecord').
-        invoke('save');
+        invoke('destroyRecord');
     }
-  },
+  }
 });

app/components/todos-route/template.hbs

@@ -9,11 +9,14 @@
   </header>
 
   <section class='main'>
-    {{todos-list todos=filtered class='todo-list'}}
+    {{todos-list todos=filtered 
+                 class="todo-list"
+                 actionPatchTodo='patchTodo' 
+                 actionDeleteTodo='deleteTodo'}}
 
-    {{input type='checkbox'
-            class='toggle-all'
-            checked=allAreDone}}
+    {{todo-checkbox class="toggle-all"
+                    checked=allAreDone
+                    action='allAreDoneChange'}}
   </section>
 
   <footer class='footer'>

app/styles/app.css

@@ -129,6 +129,7 @@ label[for='toggle-all'] {
 	height: 34px;
 	text-align: center;
 	border: none; /* Mobile Safari */
+	cursor: pointer;
 }
 
 .toggle-all:before {
@@ -180,12 +181,14 @@ label[for='toggle-all'] {
 	/* auto, since non-WebKit browsers doesn't support input styling */
 	height: auto;
 	position: absolute;
-	top: 0;
-	bottom: 0;
-	margin: auto 0;
+	top: 50%;
+	left: 0;
+	margin: 0;
+	margin-top: -20px;
 	border: none; /* Mobile Safari */
 	-webkit-appearance: none;
 	appearance: none;
+	cursor: pointer;
 }
 
 .todo-list li .toggle:after {
@@ -197,10 +200,9 @@ label[for='toggle-all'] {
 }
 
 .todo-list li label {
-	white-space: pre;
 	word-break: break-word;
-	padding: 15px 60px 15px 15px;
-	margin-left: 45px;
+	padding: 15px;
+	margin: 0 45px;
 	display: block;
 	line-height: 1.2;
 	transition: color 0.4s;
@@ -214,16 +216,17 @@ label[for='toggle-all'] {
 .todo-list li .destroy {
 	display: none;
 	position: absolute;
-	top: 0;
+	top: 50%;
 	right: 10px;
-	bottom: 0;
 	width: 40px;
 	height: 40px;
-	margin: auto 0;
+	margin: 0;
+	margin-top: -20px;
 	font-size: 30px;
 	color: #cc9a9a;
 	margin-bottom: 11px;
 	transition: color 0.2s ease-out;
+	cursor: pointer;
 }
 
 .todo-list li .destroy:hover {
@@ -310,26 +313,15 @@ label[for='toggle-all'] {
 }
 
 .clear-completed,
-html .clear-completed:active {
+.clear-completed:active {
 	float: right;
 	position: relative;
 	line-height: 20px;
 	text-decoration: none;
 	cursor: pointer;
-	visibility: hidden;
-	position: relative;
-}
-
-.clear-completed::after {
-	visibility: visible;
-	content: 'Clear completed';
-	position: absolute;
-	top: 0;
-	right: 0;
-	white-space: nowrap;
 }
 
-.clear-completed:hover::after {
+.clear-completed:hover {
 	text-decoration: underline;
 }
 

bower.json

@@ -2,8 +2,8 @@
   "name": "todos",
   "dependencies": {
     "jquery": "^1.11.1",
-    "ember": "1.10.0",
-    "ember-data": "1.0.0-beta.15",
+    "ember": "1.11.0-beta.5",
+    "ember-data": "1.0.0-beta.16.1",
     "ember-resolver": "~0.1.12",
     "loader.js": "ember-cli/loader.js#3.2.0",
     "ember-cli-shims": "ember-cli/ember-cli-shims#0.0.3",

package.json

@@ -23,14 +23,14 @@
     "ember-cli": "0.2.1",
     "ember-cli-app-version": "0.3.2",
     "ember-cli-babel": "^4.0.0",
-    "ember-cli-content-security-policy": "0.3.0",
+    "ember-cli-content-security-policy": "0.4.0",
     "ember-cli-dependency-checker": "0.0.8",
     "ember-cli-htmlbars": "0.7.4",
     "ember-cli-ic-ajax": "0.1.1",
     "ember-cli-inject-live-reload": "^1.3.0",
     "ember-cli-qunit": "0.3.9",
     "ember-cli-uglify": "1.0.1",
-    "ember-data": "1.0.0-beta.15",
+    "ember-data": "1.0.0-beta.16.1",
     "ember-export-application-global": "^1.0.2",
     "express": "^4.8.5",
     "glob": "^4.0.5"

tests/unit/components/todo-checkbox/component-test.js

@@ -0,0 +1,21 @@
+import {
+  moduleForComponent,
+  test
+} from 'ember-qunit';
+
+moduleForComponent('todo-checkbox', {
+  // specify the other units that are required for this test
+  // needs: ['component:foo', 'helper:bar']
+});
+
+test('it renders', function(assert) {
+  assert.expect(2);
+
+  // creates the component instance
+  var component = this.subject();
+  assert.equal(component._state, 'preRender');
+
+  // renders the component to the page
+  this.render();
+  assert.equal(component._state, 'inDOM');
+});

tests/unit/components/todo-item/component-test.js

@@ -6,6 +6,7 @@ import {
 moduleForComponent('todo-item', {
   // specify the other units that are required for this test
   // needs: ['component:foo', 'helper:bar']
+  needs: ['component:todo-checkbox']
 });
 
 test('it renders', function(assert) {