New Twiddle

components.author-row.js

import Ember from 'ember';
import { task, timeout } from 'ember-concurrency';

export default Ember.Component.extend({
  author: null,
  
  setAsFavorite: task(function*() {
    yield timeout(1000);
  	let author = this.get('author');
    author.set('favorite', true);
    yield author.save();
  }),
  
  actions: {
  	setAsFavorite() {
    	this.get('setAsFavorite').perform();
    }
  }
});

controllers.application.js

import Ember from 'ember';

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

mirage.config.js

export default function() {
  this.get('/books');
  this.get('/authors/:id');
  this.patch('/authors/:id');
};

mirage.fixtures.authors.js

export default [
  { id: 1, name: 'Charles Stross', favorite: false, bookIds: [1] },
  { id: 2, name: 'Stephen King', favorite: false, bookIds: [2] },
  { id: 3, name: 'J. R. R. Tolkien', favorite: false, bookIds: [3] },
  { id: 4, name: 'J. K. Rowling', favorite: false, bookIds: [4] }
];

mirage.fixtures.books.js

export default [
  { id: 1, title: 'Accelerando', authorId: 1 },
  { id: 2, title: 'The Shining', authorId: 2 },
  { id: 3, title: 'The Hobbit', authorId: 3 },
  { id: 4, title: 'Harry Potter and the Deathly Hallows', authorId: 4 }
];

mirage.scenarios.default.js

export default function(server) {
  server.loadFixtures('authors');
  server.loadFixtures('books');
}

mirage.serializers.application.js

import { JSONAPISerializer } from 'ember-cli-mirage';

export default JSONAPISerializer.extend({
  alwaysIncludeLinkageData: true
});

models.author.js

import Model from 'ember-data/model';
import attr from 'ember-data/attr';
import { belongsTo, hasMany } from 'ember-data/relationships';

export default Model.extend({
  name: attr('string'),
  favorite: attr('boolean'),
  books: hasMany('book')
});

models.book.js

import Model from 'ember-data/model';
import attr from 'ember-data/attr';
import { belongsTo, hasMany } from 'ember-data/relationships';

export default Model.extend({
  title: attr('string'),
  author: belongsTo('author')
});

routes.application.js

import Ember from 'ember';

export default Ember.Route.extend({
  model() {
    return this.get('store').findAll('book');
  }
});

templates.application.hbs

<ul>
  {{#each model as |book|}}
    <li>
      {{book.title}}
      {{author-row author=book.author}}
    </li>
  {{/each}}
</ul>

templates.components.author-row.hbs

<div>
  <em>{{author.name}}</em>
</div>

<div>
  {{#if author.favorite}}
    Favorite!
  {{else}}
    <button {{action "setAsFavorite"}}>Set as favorite</button>
  {{/if}}
</div>
  
<div>
  {{#if setAsFavorite.isRunning}}
    saving…
  {{else if setAsFavorite.last.isError}}
    <span style="color: red;">{{setAsFavorite.last.error}}</span>
  {{/if}}
</div>

twiddle.json

{
  "version": "0.13.1",
  "EmberENV": {
    "FEATURES": {}
  },
  "ENV": {
    "ember-cli-mirage": {
      "enabled": true
    }
  },
  "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",
    "babel-polyfill":"https://cdn.rawgit.com/nicksrandall/babel-polyfill/master/browser-polyfill.js"
  },
  "addons": {
    "ember-data": "2.16.3",
    "ember-cli-mirage": "0.4.6",
    "ember-concurrency": "0.8.19"
  }
}