Mirage

adapters.application.js

import JSONAPIAdapter from 'ember-data/adapters/json-api';

export default JSONAPIAdapter.extend({
  namespace: 'api'
});

mirage.config.js

export default function() {
  this.namespace = 'api';
  this.timing = 100;
  
  this.get('users');
  this.get('users/:id');
  
  this.get('groups');
  this.get('groups/:id');
};

mirage.factories.group.js

import { Factory, faker, trait } from 'ember-cli-mirage';

export default Factory.extend({
  name(i) {
    return `Group #${i + 1}`;
  },
  
  // withUsers: trait({
    afterCreate(group, server) {
      server.createList('user', 2, {group});
    }
  // })
});

mirage.factories.user.js

import { Factory, faker, trait } from 'ember-cli-mirage';

export default Factory.extend({
  name() {
    return faker.name.findName();
  }
});

mirage.models.group.js

import { Model, belongsTo, hasMany } from 'ember-cli-mirage';

export default Model.extend({
  
  users: hasMany(),

});

mirage.models.user.js

import { Model, belongsTo, hasMany } from 'ember-cli-mirage';

export default Model.extend({
  
  group: belongsTo(),
  
  // posts: hasMany(),

});

mirage.scenarios.default.js

export default function(server) {
  server.createList('group', 5);
};

models.group.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(),
  users: hasMany(),
});

models.user.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(),
  group: belongsTo(),
});

routes.application.js

import Ember from 'ember';

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

templates.application.hbs

<h1>Mirage Sandbox</h1>

<table style="width: 100%;">
  <thead style="text-align: left;">
  	<tr>
      <th>Group</th>
      <th>User</th>
    </tr>
	</thead>
  
  <tbody>
    {{#each model as |group|}}
      <tr>
        <td>{{group.name}}</td>
        <td>
        	{{#each group.users as |user|}}
            <div>{{user.name}}</div>
          {{/each}}
        </td>
      </tr>
    {{/each}}
  </tbody>
</table>

{{outlet}}

twiddle.json

{
  "version": "0.12.1",
  "ENV": {
    "ember-cli-mirage": {
      "enabled": true
    }
  },
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js",
    "ember": "2.12.0",
    "ember-template-compiler": "2.12.0",
    "ember-testing": "2.12.0"
  },
  "addons": {
    "ember-data": "2.12.1",
    "ember-cli-mirage": "0.3.1"
  }
}