workmanw · June 21, 2017 18:41 · Jun 21, 2017 · Jun 21, 2017 · Jun 21, 2017 · Jun 21, 2017
diff --git a/twiddle.json b/twiddle.json
@@ -15,6 +15,6 @@
     "ember-testing": "2.12.0"
   },
   "addons": {
-    "ember-data": "2.12.0"
+    "ember-data": "2.12.2"
   }
 }
diff --git a/models.todo-list.js b/models.todo-list.js
@@ -3,4 +3,5 @@ import attr from "ember-data/attr";
 import { belongsTo, hasMany } from "ember-data/relationships";
 
 export default Model.extend({
+  todos: hasMany('todo', { async: false })
 });
diff --git a/models.todo.js b/models.todo.js
@@ -2,7 +2,7 @@ import Model from "ember-data/model";
 import attr from "ember-data/attr";
 import { belongsTo, hasMany } from "ember-data/relationships";
 
-export default DS.Model.extend({
+export default Model.extend({
   name: attr('string'),
   list: belongsTo('todoList', { async: false })
 });

diff --git a/twiddle.json b/twiddle.json
@@ -15,6 +15,6 @@
     "ember-testing": "2.12.0"
   },
   "addons": {
-    "ember-data": "2.14.2"
+    "ember-data": "2.12.0"
   }
 }
diff --git a/controllers.todo-list.js b/controllers.todo-list.js
@@ -0,0 +1,38 @@
+import Ember from 'ember';
+
+const {
+  computed,
+  get,
+} = Ember;
+
+export default Ember.Controller.extend({
+  store: Ember.inject.service(),
+
+  todos: computed('model', function() {
+    return this.get('store').filter('todo', todo => {
+      return get(todo, 'list.id') === get(this, 'model.id');
+    });
+  }),
+
+  hasTodos: computed('todos.[]', function() {
+    return get(this, 'todos').get('length') > 0;
+  }),
+
+  actions: {
+    addTodo(todo) {
+      get(this, 'store').createRecord('todo', {
+        name: todo,
+        list: get(this, 'model')
+      });
+      return false;
+    },
+
+    removeTodo(todo) {
+      const todos = get(this, 'todos');
+      todo.unloadRecord();
+      todos.forEach(todo => {
+        Ember.assert('should not have null todo', todo !== null);
+      });
+    },
+  },
+});
diff --git a/initializers.error.js b/initializers.error.js
@@ -0,0 +1,10 @@
+import $ from 'jquery';
+
+export default {
+  name: 'on-error',
+  initialize(application) {
+    Ember.onerror = function(error) {
+      $('.error-section').append('<div>' + error + '</div>\n');
+    };
+  }
+};
diff --git a/models.todo-list.js b/models.todo-list.js
@@ -0,0 +1,6 @@
+import Model from "ember-data/model";
+import attr from "ember-data/attr";
+import { belongsTo, hasMany } from "ember-data/relationships";
+
+export default Model.extend({
+});
diff --git a/models.todo.js b/models.todo.js
@@ -0,0 +1,9 @@
+import Model from "ember-data/model";
+import attr from "ember-data/attr";
+import { belongsTo, hasMany } from "ember-data/relationships";
+
+export default DS.Model.extend({
+  name: attr('string'),
+  list: belongsTo('todoList', { async: false })
+});
+
diff --git a/router.js b/router.js
@@ -0,0 +1,13 @@
+import Ember from 'ember';
+import config from './config/environment';
+
+const Router = Ember.Router.extend({
+  location: 'none',
+  rootURL: config.rootURL
+});
+
+Router.map(function() {
+  this.route('todo-list', { path: '/' });
+});
+
+export default Router;
diff --git a/routes.todo-list.js b/routes.todo-list.js
@@ -0,0 +1,43 @@
+import Ember from 'ember';
+
+const DUMMY_TODO_LIST = {
+  data: {
+    type: 'todo-list',
+    id: 42,
+    attributes: {},
+  },
+  included: [{
+    type: 'todo',
+    id: 123,
+    attributes: {
+      name: 'Figure out this bug',
+    },
+    relationships: {
+      list: {
+        data: {
+          id: '42',
+          type: 'todo-list',
+        },
+      },
+    },
+  }],
+};
+
+export default Ember.Route.extend({
+  model() {
+    this.store.pushPayload(DUMMY_TODO_LIST);
+    return this.store.peekRecord('todo-list', '42');
+  },
+
+  // Creating the record this way, however, works just fine
+  // model() {
+  //   return this.store.createRecord('todo', {
+  //     id: '42',
+  //     todos: [],
+  //   });
+  // },
+  // afterModel(model) {
+  //   const todos = model.get('todos');
+  //   return todos.createRecord({ id: '123', name: 'this works though' });
+  // },
+});
diff --git a/styles.app.css b/styles.app.css
@@ -0,0 +1,20 @@
+body {
+  margin: 12px 16px;
+  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  font-size: 12pt;
+}
+
+.error-section {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  max-height: 100px;
+  color: #b94a48;
+  background-color: #f2dede;
+  border-color: #eed3d7;
+}
+
+.error-section div {
+  padding: 6px 14px;
+}
diff --git a/templates.todo-list.hbs b/templates.todo-list.hbs
@@ -0,0 +1,19 @@
+<form {{action 'addTodo' newTodo on='submit'}}>
+  {{input type='text' value=newTodo placeholder='Add todo'}}
+  <input type="submit" value="Add todo" />
+</form>
+{{#if hasTodos}}
+  <ul>
+    {{#each todos as |todo|}}
+      <li>
+        {{todo.name}}
+        <button {{action 'removeTodo' todo}}>Done</button>
+      </li>
+    {{/each}}
+  </ul>
+{{else}}
+  <p>No todos</p>
+{{/if}}
+
+<div class="error-section">
+</div>
diff --git a/twiddle.json b/twiddle.json
@@ -0,0 +1,20 @@
+{
+  "version": "0.12.1",
+  "EmberENV": {
+    "ENABLE_DS_FILTER": true,
+    "FEATURES": {}
+  },
+  "options": {
+    "use_pods": false,
+    "enable-testing": false
+  },
+  "dependencies": {
+    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
+    "ember": "2.12.0",
+    "ember-template-compiler": "2.12.0",
+    "ember-testing": "2.12.0"
+  },
+  "addons": {
+    "ember-data": "2.14.2"
+  }
+}