Ember Data | has-many Batch Create

adapters.application.js

import DS from 'ember-data';
import Ember from 'ember';

const { copy } = Ember;
const { Promise } = Ember.RSVP;

export default DS.JSONAPIAdapter.extend({
  
  // just stubbing this for twiddle
  ajax(url, params) {
    let id = 1;
    return Promise.resolve({
      data: copy(params.data.data, true).map((r) => {
        // emulate an API response containing IDs
        r.id = `student-${id++}`;
        return r;
      })
    });
  },
  
  batchCreateForHasMany(store, modelName, relationshipName, records, parentRecord) {
    let modelClass = store.modelFor(modelName);
    let serializer = store.serializerFor(modelName);
    let serialized = serializer.serializeRecordArray(store, modelClass, records);
    let url = this.urlForPatchHasMany(parentRecord.constructor.modelName, parentRecord.get('id'), modelName, relationshipName);
    
    // roughly, likely wrong
    let params = {
      method: 'PATCH',
      data: serialized
    };
    
    // roughly, likely the wrong method signature
    return this.ajax(url, params)
      .then((jsonApiPayload) => {
    		store.push(jsonApiPayload);
    	});
  },
  
  // make this into whatever you actually need
  urlForPatchHasMany(parentModelName, parentId, modelName, relationshipName) {
    return `${parentModelName}/${parentId}/${relationshipName}/`;
  }
});

controllers.application.js

import Ember from 'ember';

let num = 100;
let clientId = 1;

function letterFromNum(num) {
  if (num > 90) return 'A';
  if (num > 80) return 'B';
  if (num > 70) return 'C';
  if (num > 60) return 'D';
  return 'F';
}

function makeGrade(store, assignment) {
  return store.createRecord('grade', {
    id: `student-${clientId++}`,
    letterValue: letterFromNum(num),
    numberValue: num -= 3,
    assignment
  });
}

export default Ember.Controller.extend({
  appName: 'Ember Twiddle',
  actions: {
    createGrades() {
      let assignment = this.get('model.assignment');
      let grades = assignment.get('grades');
      let store = this.get('store');
      
      for (let i = 0; i < 25; i++) {
        grades.pushObject(makeGrade(store, assignment));
      }
      
      num = 100;
    },
    saveGrades() {
      let assignment = this.get('model.assignment');
      let grades = assignment.get('grades');
      let store = this.get('store');
      let adapter = store.adapterFor('assignment');
      
      // what would be a more generic case
      // adapter.batchCreate(store, grades.toArray());
      
      // better for the hasMany case
      adapter.batchCreateForHasMany(store, 'grade', 'grades', grades.toArray(), assignment);
    }
  }
});

models.assignment.js

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

export default Model.extend({
  title: attr(),
  grades: hasMany('grade', { inverse: 'assignment', async: false })
});

models.grade.js

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

export default Model.extend({
  letterValue: attr(),
  numberValue: attr(),
  assignment: belongsTo('assignment', { inverse: 'grades', async: false })
});

routes.application.js

import Ember from 'ember';

export default Ember.Route.extend({
  model() {
    let assignment = this.get('store').push({
      data: {
        id: '1',
        type: 'assignment',
        attributes: {
          title: 'Assignment 1'
        }
      }
    });
    
    return { assignment };
  }
});

serializers.application.js

import Ember from 'ember';
import DS from 'ember-data';

export default DS.JSONAPISerializer.extend({
  payloadKeyFromModelName(modelName) {
    return modelName;
  },
  
  serializeRecordArray(store, modelClass, records) {
    let data = records.map(record => {
      return this.serialize(record._createSnapshot()).data;
    });

    return { data };
  }
});

templates.application.hbs

<h1>{{model.assignment.title}}</h1>
<br>

{{#if model.assignment.grades.length}}
  <button {{action 'saveGrades'}}>Save Grades</button>
{{/if}}

<hr>

{{#each model.assignment.grades as |grade|}}
  <li>{{grade.id}} | {{grade.letterValue}} - {{grade.numberValue}} <i> {{if grade.isNew 'unsaved' 'saved'}}</i></li>
{{else}}
  No Grades added yet. <button {{action 'createGrades'}}>Add some?</button>
{{/each}}

<br>
{{outlet}}
<br>
<br>

twiddle.json

{
  "version": "0.13.1",
  "EmberENV": {
    "FEATURES": {}
  },
  "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"
  }
}