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({
  findAll() {
  	return $.getJSON('/api/countries');
  }
});

export default CountryAdapter;

adapters.state.js

import ApplicationAdapter from './application';

const StateAdapter = ApplicationAdapter.extend({

});

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"
          },
          {
            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/countries/141/states',
      responseText: {
        states: [
          {
            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
          }
        ]
      }
    });
  },
  
  afterModel() {
    return Ember.RSVP.hash({
      countries: this.store.findAll('country')
    }).then(
      (hash) => {
        set(this, 'countries', hash.countries);
      }
    );
  },

  setupController(controller, model) {
    this._super(controller, model);

    set(controller, 'countries', get(this, 'countries'));
  }
});

controllers.application.js

import Ember from 'ember';

const {
  get,
  set,
  computed
} = Ember;

export default Ember.Controller.extend({
  appName:'Ember Twiddle',
  
  actions: {

    setSelectedCountry(value) {
      //var selectedCountry = this.store.peekRecord('country', value);
      var selectedCountry = this.store.findRecord('country', value);
      console.log(selectedCountry);
      var states = selectedCountry.get('name');
      console.log(states);
      
      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('states', {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>Country</h2>
<select onchange={{action "setSelectedCountry" value="target.value"}}>
  {{#each countries as |country|}}
    <option value={{country.id}}>{{country.name}}</option>
  {{/each}}
</select>

<h3>States</h3>

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

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"
  }
}