so-question-54874912

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle'
});

mirage.config.js

import Mirage from 'ember-cli-mirage';
import Ember from 'ember';
export default function() {
  
  this.get('/image-models', function(db, request) {
    
    let image = {
      id: 'image_1',
      fileName: 'myImage',
      fileExt: 'png',
      url: 'url',
      notes: [{
        id: 'note_2',
        category: 'category',
        text: 'hello world'
      }]
    };
    
    return {
      data: {
          type: 'image-models',
          id: image.id,
          attributes: { "file-name": image.fileName },
          relationships: {
            "notes": {
            	data: [{ type: "note-models", id: image.notes[0].id }]
          	}
          }
      },
      included: image.notes.map((note) => {
        return {
          type: 'note-models',
          id: note.id,
          attributes: { text: note.text }
        };
      })
    };
   
  });
  
}

models.image-model.js

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

export default MediaModel.extend({ 
    fileName: DS.attr('string'),
    fileExt: DS.attr('string'),

    url: DS.attr('string'),
});

models.media-model.js

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

export default Model.extend({
  notes: DS.hasMany('note-model', { inverse: 'noteable' }),
});

models.note-model.js

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

export default Model.extend({
    category: DS.attr('string'),
    text: DS.attr('string'),

    image: DS.belongsTo('image'),
    noteable: DS.belongsTo('media-model', { polymorphic: true }),
});

router.js

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

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

Router.map(function() {
  
  this.route('images', function() {});
});

export default Router;

routes.images.js

import Ember from 'ember';

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

templates.application.hbs

<h1>Welcomes to {{appName}}</h1>
<br>
<br>
{{#link-to "images"}}Show Image{{/link-to}}
{{outlet}}
<br>

templates.images.hbs

<ul>
{{#each model as |image|}}
	<li>{{image.fileName}} (image.notes.length: {{image.notes.length}})</li>
  <ul>
    {{#each image.notes as |note|}}
      <li>{{note.text}}</li>
    {{/each}}
  </ul>
{{/each}}
</ul>

twiddle.json

{
  "version": "0.13.0",
  "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"
  },
  "addons": {
    "ember-data": "2.16.3",
    "ember-cli-mirage": "0.4.1"
  }
}