confused about asyc loading from direct url emberjs - ember.js

Question

Below are my fixture adapters.
My understanding is model hook is not called on transitionTo or link-to when a model is provided.
But when same route is reached direactly by sharing or copy pasting url model hook is called.
Now when I transition by passing a model I see the city 1 and city 2 properly.
But when I copy past url the cities are not displayed. I tried .then and then get cities still I cannot see it. I have commented that line. I know I am doing something stupid. I did googled but couldnt figure out.
here is my jsbin: BIN BIN BIN
Though this is similar to THiS question. the ans is use modelFor and then findBy. but modelFor gives model for the parent route. but in my case since its not nested routes. this.modelFor('countries') gives undefines and hence i cannot apply findBy on it.
model: function(params) {
this.store.find('country', params.countryCode).then(function(country) {
console.log(country);
//country.get('cities');
});
}
Q.Country.FIXTURES = [{
id: 1,
countryCode: "CO",
countryName: "Country",
cities: [1, 2]
}];
Q.City.FIXTURES = [{
id: 1,
cityName: "city 1",
country: 1
}, {
id: 2,
cityName: "city 2",
country: 1
}];
Q.CountryRoute = Ember.Route.extend({
model: function(params) {
return this.store.find('country', params.countryCode);
},
serialize: function(country) {
return {
country_id: country.get("countryCode")
};
},
afterModel: function(model) {
console.log("after model was called");
//this.transitionTo('cities',model);
}
});
Q.Router.map(function() {
this.resource("countries");
this.resource('country', {
path: ':country_id'
});
});

Answer 1

You have to return something from your model() hook. No need to use then() because in the model hook Ember will automatically wait for the promise to resolve.
model: function(params) {
return this.store.find('country', params.country_id);
}
If you want to use a slug, something like this could work:
Q.Router.map(function() {
this.resource("countries");
this.resource('country', {
path: ':country_code'
});
});
model: function(params) {
return this.store.findQuery('country', { code: params.country_code });
}