Ember-Data - serializing null ID on relationships for new records

adapters.application.js

import DS from 'ember-data';

export default DS.JSONAPIAdapter.extend({
});

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  newDriver: null,
  newGarage: null,
  actions: {
    addNewDriverToCarOne() {
      let driver = this.get('store').createRecord('driver', {
        'name': 'New Driver'
      });
      // model is "Car One" record.
      this.get('model').get('drivers').addObject(driver);
      this.set('newDriver', driver);
    },
    saveCarOne() {
      // model is "Car One" record.
      this.get('model').save();
    },
    saveNewDriver() {
      if (this.get('newDriver')) {
      	this.get('newDriver').save();
      }
    },
    
    addNewGarageToCarOne() {
      let garage = this.get('store').createRecord('garage', {
        'name': 'New Garage'
      });
      this.set('model.garage', garage);
      this.set('newGarage', garage);
    },
    saveNewGarage() {
      if (this.get('newGarage')) {
      	this.get('newGarage').save();
      }
    }
  }
});

models.car.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: DS.attr('string'),
  drivers: DS.hasMany('driver'),
  garage: DS.belongsTo('garage')
});

models.driver.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: DS.attr('string'),
  cars: DS.hasMany('car')
});

models.garage.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: DS.attr('string'),
  car: DS.belongsTo('car')
});

routes.application.js

import Ember from 'ember';

export default Ember.Route.extend({
  init() {
    $.mockjax({
      url: '/cars/1',
      responseText: {
        "data": 
          {
            "id": 1,
            "type": "cars",
            "attributes": {
            	"name": "Car One"
            },
            "relationships": {
              "drivers": { 
                "data": []
              }
            }
          }
        
      }
    });
    $.mockjax({
      url: '/cars/*',
      type: 'PATCH',
      status: 204
    });
    $.mockjax({
      url: '/drivers',
      responseText: {
        "data": []
      }
    });
  },
  model() {
    return this.get('store').findRecord('car', '1')
  }
});

serializers.application.js

import DS from 'ember-data';
export default DS.JSONAPISerializer.extend({
  serialize() {
    let ret = this._super(...arguments);
    console.log('SERIALIZED DATA', ret);
    return ret;
  }
});

templates.application.hbs

<h1><strong>Ember-Data: IDs on relationships for new records are serialized as null for JSON API</strong></h1>

<p>Use the buttons in order to demo the issue.</p>
<p>View the console to see the serialized data in Step 2 and Step 3. The serialization in Step 2 is the issue.</p>

<h2>Has Many (many to many)</h2>
<p>Models are Car and Driver. Car to Driver is a many to many relationship.</p>

<button {{action 'addNewDriverToCarOne'}}>Step 1: Add new Driver to Car without saving new Driver yet</button>
<br>
<br>

<button {{action 'saveCarOne'}}>Step 2: Save Car</button>
<br>
<p>At this step, <strong>the relationship to the new driver is saved with ID as null</strong>.
</p>
<br>

<button {{action 'saveNewDriver'}}>Step 3: Save new Driver</button>
<br>
<p>This step is where we want to persist the relationship to Car to the server. (And this works just fine.)</p>
<br>
<br>

<h2>Belongs To (one to one)</h2>
<p>Models are Car and Garage. Car to Garage is a one to one relationship.</p>

<button {{action 'addNewGarageToCarOne'}}>Step 1: Set new Garage on Car without saving new Garage yet</button>
<br>
<br>

<button {{action 'saveCarOne'}}>Step 2: Save Car</button>
<br>
<p>As with hasMany, <strong>null ID is sent on garage relationship.</strong></p>

<button {{action 'saveNewGarage'}}>Step 3: Save new Garage</button>
<br>
<p>Persisting the relationship to the server works just fine.</p>
<br>
<br>

twiddle.json

{
  "version": "0.8.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": "release",
    "ember-data": "release",
    "ember-template-compiler": "release",
    "jquery-mockjax": "https://cdnjs.cloudflare.com/ajax/libs/jquery-mockjax/1.6.2/jquery.mockjax.js"
  }
}