Country/States Cascaded

adapters.application.js

import DS from 'ember-data';
const ActiveModelAdapter = DS.ActiveModelAdapter;

const ApplicationAdapter = ActiveModelAdapter.extend({
  shouldReloadAll: function(store, snapshotRecordArray) {
    return true;
  },

  shouldBackgroundReloadRecord: function(store, snapshot) {
    return false;
  }
});

export default ApplicationAdapter;

adapters.country.js

import ApplicationAdapter from './application';

const CountryAdapter = ApplicationAdapter.extend({
  namespace: 'api'
});

export default CountryAdapter;

adapters.state.js

import ApplicationAdapter from './application';

const StateAdapter = ApplicationAdapter.extend({
	namespace: 'api',
});

export default StateAdapter;

application.route.js

import Ember from 'ember';

const {
  get,
  set
} = Ember;

export default Ember.Route.extend({
  init() {
    this._super(...arguments);
    
    $.mockjax({
      url: '/api/countries',
      responseText: {
        countries: [
          {
            id: 140,
            name: "USA"
          },
          {
            id: 141,
            name: "France",
            state_ids: [10] 
          },
          {
            id: 142,
            name: "Mexico"
          }
        ]
      }
    }, {
      url: '/api/countries/140/states',
      responseText: {
        states: [
          {
            id: 1,
            name: "Texas",
            country_id: 140
          },
          {
            id: 2,
            name: "Nevada",
            country_id: 140
          },
          {
            id: 3,
            name: "California",
            country_id: 140
          }
        ]
      }
    }, {
      url: '/api/states/10',
      responseText: {
        state: {
            id: 10,
            name: "Strasbourg",
            country_id: 141
          }
      }
    }, {
      url: '/api/countries/142/states',
      responseText: {
        states: [
          {
            id: 20,
            name: "Nuevo Leon",
            country_id: 142
          },
          {
            id: 21,
            name: "Chihuahua",
            country_id: 142
          }
        ]
      }
    });
  },
  
  model() {
    return this.store.findAll('country');
  }
});

controllers.application.js

import Ember from 'ember';

const {
  get,
  set,
  computed
} = Ember;

export default Ember.Controller.extend({
  appName:'Ember Twiddle',
  
  countries: Ember.computed.alias('model'),
  actions: {

    setSelectedCountry(countryId) {
      var selectedCountry = this.get('model').findBy('id', countryId);
      console.log(selectedCountry);
      window.selectedCountry = selectedCountry;
      selectedCountry.get('states').then(() => {
        var states = selectedCountry.get('name');

        set(this, 'selectedCountry', selectedCountry);	
      });

      return false;
    }
    
  }
});

models.country.js

import DS from 'ember-data';

export default DS.Model.extend({
  name: DS.attr('string'),
  states: DS.hasMany('state', {async: true})
});

models.state.js

import DS from 'ember-data';

export default DS.Model.extend({
  name: DS.attr('string'),
  country: DS.belongsTo('country', {async: true})
});

serializers.application.js

import DS from 'ember-data';
const ActiveModelSerializer = DS.ActiveModelSerializer;

export default ActiveModelSerializer.extend();

templates.application.hbs

<h1>Welcome to {{appName}}</h1>
<br>
<br>

<h2>Countries ({{countries.length}})</h2>
<select onchange={{action "setSelectedCountry" value="target.value"}}>
  {{#each countries as |country|}}
    <option value={{country.id}}>{{country.name}}</option>
  {{/each}}
</select>

{{#if selectedCountry}}
<h3>States</h3>

	{{selectedCountry.name}}: {{selectedCountry.states.length}}
	
  {{#each selectedCountry.states as |state|}}
    {{state.name}}
  {{/each}}
{{/if}}

twiddle.json

{
  "version": "0.4.8",
  "dependencies": {
  	"active-model-adapter": "1.13.5",
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "1.13.11",
    "ember-data": "1.13.15",
    "ember-template-compiler": "1.13.11",
    "jquery-mockjax": "https://cdnjs.cloudflare.com/ajax/libs/jquery-mockjax/1.6.2/jquery.mockjax.js"
  }
}