Reading-list

components.reading-list.js

import Ember from 'ember';

export default Ember.Component.extend({

  value: "",

  actions: {

    onEnter(title) {
      if (title) {
        this.get('addBook')({ title });
      }
      this.set('value', "");  // reset value
    }

  }

});

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
 
});

db.js

import Ember from 'ember';

export default Ember.Object.create({

  _records: [
    { title: "El Aleph" },
    { title: "2666" },
    { title: "The Black Swan" }
  ],

  books() {
    return Ember.copy(this._records);
  },

  addBook(book) {
    this._records.push(book);
  },

  removeBook(book) {
    const index = this._records.indexOf(book);
    this._records.splice(index, 1);
  }

});

router.js

import Ember from 'ember';
import config from './config/environment';

const Router = Ember.Router.extend({
  location: 'none',
  rootURL: config.rootURL
});

Router.map(function() {
});

export default Router;

routes.application.js

import Ember from 'ember';
import db from '../utils/db';

export default Ember.Route.extend({

  model() {
    return db.books();
   },

   actions: {

     addBook(book) {
       db.addBook(book);
       this.refresh();
     },

     removeBook(book) {
       db.removeBook(book);
       this.refresh();
     }

   }

});

templates.application.hbs

<h1>Reading list</h1>

{{reading-list books=model addBook=(route-action "addBook") removeBook=(route-action "removeBook")}}

{{outlet}}

templates.components.reading-list.hbs

{{one-way-input
  value
  update=(action (mut value))
  keyEvents=(hash
    13=(action 'onEnter')
  )
}}

<ul>
	{{#each books as |book|}}
  	<li>{{book.title}}</li>
  {{/each}}
</ul>

tests.helpers.destroy-app.js

import Ember from 'ember';

export default function destroyApp(application) {
  Ember.run(application, 'destroy');
}

tests.helpers.resolver.js

import Resolver from '../../resolver';
import config from '../../config/environment';

const resolver = Resolver.create();

resolver.namespace = {
  modulePrefix: config.modulePrefix,
  podModulePrefix: config.podModulePrefix
};

export default resolver;

tests.helpers.start-app.js

import Ember from 'ember';
import Application from '../../app';
import config from '../../config/environment';

const { run } = Ember;
const assign = Ember.assign || Ember.merge;

export default function startApp(attrs) {
  let application;

  let attributes = assign({rootElement: "#test-root"}, config.APP);
  attributes = assign(attributes, attrs); // use defaults, but you can override;

  run(() => {
    application = Application.create(attributes);
    application.setupForTesting();
    application.injectTestHelpers();
  });

  return application;
}

tests.test-helper.js

import resolver from './helpers/resolver';
import {
  setResolver
} from 'ember-qunit';

setResolver(resolver);

twiddle.json

{
  "version": "0.13.0",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "2.16.2",
    "ember-template-compiler": "2.16.2",
    "ember-testing": "2.16.2"
  },
  "addons": {
    "ember-data": "2.16.3",
    "ember-one-way-controls": "3.0.1",
    "ember-route-action-helper": "3.0.1",
  }
}