Why isn't my ember.js route model being called?
Ember Documentation on the model hook:
"A hook you can implement to convert the URL into the model for this route."
This explains why the model hook is just called on page refresh. But this confuses a lot of people :-). So, this is not the right hook in this case. I think you should use the setupController hook for this case. Try this:
App.PlaceRoute = Ember.Route.extend({
setupController: function (controller, model) {
console.log('place route called');
var place;
$.getJSON('https://api.foursquare.com/v2/venues/' + model.get('place_id') + '?client_id=nnn&client_secret=nnn',
function (data) {
var v = data.response.venue;
place = App.Place.create({ id: v.id, name: v.name, lat: v.location.lat, lng: v.location.lng });
});
controller.set("model", place);
}
});
Additional 2 cents from myself: Why is the model hook just executed, when the app is entered via URL/direct browser navigation?
Ember has the assumption, that you do not necessarily make a call to the model hook, if you use {{linkTo}}
. In your places template you use {{#linkTo 'place' place}} {{place.name}} {{/linkTo}}
. You are passing a place object to your route. Ember assumes that this is the same object, that you would get when executing your model hook. So from Embers View there is no need to call the model hook. So if you want to perform retrieval logic even when you use linkTo
, use the setupController hook
.
Force Ember to use the model hook; just pass the id instead of the object:
{{#link-to 'place' place.id}}
{{place.name}}
{{/link-to}}
As Ember no longer knows which object is related to given id, Ember will call the model hook (and so the data will be loaded from the server).
Based on mavilein's answer, but shorter and suitable for Ember CLI with Ember Data...
import Ember from 'ember';
export default Ember.Route.extend({
setupController: function( controller, model ) {
controller.set( "model", this.store.fetch( 'place', model.id ) );
},
});
Also note that the fetch method is only available from Ember Data 1.0.0-beta.12.
http://emberjs.com/api/data/classes/DS.Store.html#method_fetch