nested attributes ember example

application.controller.js

import Ember from 'ember';
import Serializer from '../serializers/author';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle',
  
  serialized: Ember.computed(function() {
    return JSON.stringify(this.get('model').serialize(), null, 2);
  })
});

application.route.js

import Ember from 'ember';

export default Ember.Route.extend({
  model() {
    let cameras = [
      this.get('store').createRecord('camera', { manifacturer: 'Canon' }),
      this.get('store').createRecord('camera', { manifacturer: 'Nikon' })
    ];
    return this.get('store').createRecord('author', { name: 'John', cameras });
  }
});

application.template.hbs

<h1>Nested resources in EmberJS</h1>
<p>This example shows how Ember-Data is serializing embedded records when saving. It is related to some discussions on GitHub:</p>
<ul>
<li>https://github.com/json-api/json-api/issues/795#issuecomment-159926461</li>
<li>https://github.com/cerebris/jsonapi-resources/issues/424</li>
</ul>
<p>But it should outline the reason for implementing deserialization of nested attributes in the active model serializers JSONAPI deserializer, even if this is not part of the JSONAPI spec yet.</p>
<p>see: https://github.com/spieker/active_model_serializers/tree/feature/nested_attributes</p>
<pre>
{{serialized}}
</pre>

models.author.js

import DS from 'ember-data';

export default DS.Model.extend({
  // Relationships
  cameras: DS.hasMany('camera'),
  
  // Attributes
  name: DS.attr('string')
});

models.camera.js

import DS from 'ember-data';

export default DS.Model.extend({
  // Relationships
  author: DS.belongsTo('author'),
 
  // Attributes
  manifacturer: DS.attr('string')
});

router.js

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

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

Router.map(function() {
});

export default Router;

serializers.author.js

import DS from 'ember-data';

export default DS.JSONAPISerializer.extend(DS.EmbeddedRecordsMixin, {
  // fix: move array to the data section
  //
  _serializeEmbeddedHasMany(snapshot, json, relationship) {
    this._super(snapshot, json, relationship);
    this._hasManyDataEmbedded(json, relationship)
  },

  _hasManyDataEmbedded(json, relationship) {
    if (relationship.kind != 'hasMany') {
      return;
    }
    let key = relationship.key.dasherize();
    let data = json[key].mapBy('data');
    delete json[key];
    if (!json.relationships) {
      json.relationships = {};
    }
    json.relationships[key] = {
      data
    };
  },
  
  attrs: {
    cameras: { embedded: 'always' }
  }
});

serializers.camera.js

import DS from 'ember-data';

export default DS.JSONAPISerializer.extend( {
  attrs: {
    author: { serialize: false }
  }
});

twiddle.json

{
  "version": "0.6.5",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "2.4.3",
    "ember-data": "2.4.0",
    "ember-template-compiler": "2.4.3"
  }
}