Unload Record

controllers.application.js

import Ember from 'ember';

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

controllers.index.js

import Ember from 'ember';

export default Ember.Controller.extend({
  actions: {
    onSetActiveCamera: function(scene, camera) {
      scene.set("activeCamera", camera);
    },
    
    onUnloadCamera: function(camera) {
      camera.unloadRecord()
    }
  }    
});

mirage.config.js

export default function() {
  this.get('/scenes', function(){
    return {
      data: [
        {
          id: '1',
          type: 'scenes', 
          attributes: {
            name: 'Scene A'
          },
          relationships: {
            cameras: {
            	data: [
                { type: 'cameras', id: 'camera-1' },
                { type: 'cameras', id: 'camera-2' }
              ]
            },
            'active-camera': {
              data: { type: 'cameras', id: 'camera-1' }
            }
          }
        }
      ],
      included: [
      	{
        	id: 'camera-1',
          type: 'cameras',
          attributes: { name: 'Camera 1' }
        },
        {
        	id: 'camera-2',
          type: 'cameras',
          attributes: { name: 'Camera 2' }
        }
      ]
    }
  }) 
};

mirage.serializers.application.js

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

export default JSONAPISerializer;

models.camera.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"),
  
  scene: belongsTo("scene", { async: false, inverse: "cameras" })
});

models.scene.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"),
  
  cameras: hasMany("cameras", { async: false }),
  
  activeCamera: belongsTo("camera", { async: false })
});

routes.index.js

import Ember from 'ember';

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

templates.application.hbs

{{outlet}}

<h1>Unload Record Error</h1>

templates.index.hbs

<ul>
  {{#each model as |scene|}}
    <li>
    	{{scene.name}}
      (Active Camera: {{scene.activeCamera.id}})
      <ol>
      	{{#each scene.cameras as |camera|}}
        	<li>
          	{{camera.name}}
            {{#if (eq scene.activeCamera camera)}}
            	
            {{else}}
            	<button type="button" 
              				onclick={{action (action 'onSetActiveCamera' scene camera)}}>
                      Set as active camera
              </button>
              
              <button type="button" 
              				onclick={{action (action 'onUnloadCamera' camera)}}>
                      Unload camera
              </button>
            {{/if}}
          </li>
        {{/each}}
      </ol>
    </li>
  {{/each}}
</ul>

twiddle.json

{
  "version": "0.15.1",
  "ENV": {
    "ember-cli-mirage": {
      "enabled": true
    }
  },
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js",
    "ember": "3.4.3",
    "ember-template-compiler": "3.4.3",
    "ember-testing": "3.4.3"
  },
  "addons": {
    "ember-data": "3.4.2",
    "ember-cli-mirage": "0.4.14",
    "ember-truth-helpers": "2.1.0"
  }
}