Route only loads on page refresh - Ember JS - ember.js

Question

I am currently learning Ember and I am making a simple app, but I have encountered a strange problem. I have a route setup and it only pulls the data when I reload the page. Here is my code:
// Start Ember application
App = Ember.Application.create({
LOG_TRANSITIONS: true
});
// Router paths
App.Router.map(function () {
// Homepage
this.resource('index', { path: '/' });
// Book view
this.resource('book', { path: '/book/:id/:version' });
});
// Homepage route
App.IndexRoute = Ember.Route.extend({
model: function () {
// Get all the books
return Ember.$.getJSON('/books');
}
});
// Single book view
App.BookRoute = Ember.Route.extend({
model: function (params) {
// Get a single book
return Ember.$.getJSON('/book?id=' + params.id + '&version=' + params.version);
}
});
When I go to /#/book/1/1 by clicking from the homepage, the page is blank. When I just refresh the page when I'm on there it loads the data and everything works.
Why is this? What can I do to make it work when the user clicks from the homepage?

Answer 1

Thank you everyone for your suggestions. I figured it out with this code here:
App.BookRoute = Ember.Route.extend({
setupController: function (controller,model) {
// Get a single book
Ember.$.getJSON('/book?id=' + model.id + '&version=' + model.version,
function (data) {
controller.set('model',data);
});
}
});
I used setupController instead of model.

Answer 2

you should pass a model in link-to. paste your template code to check how you are creating links. check this for more info http://emberjs.com/guides/templates/links/

Answer 3

If you use link-to helper you must not set context model in this one... you simply need to set an id,
{{#each book in books}}
{{#link-to "book" book.id}}{{book.name}}{{/link-to}}
{{/each}}
and the model of the next route will be request.

Answer 4

The Ember link-to helper doesn't execute the model callback. I've dealt with a situation very much like this recently, and here's how I solved it:
// In the index template
{{#each book in model}}
{{#link-to 'book' book}}{{book.name}}{{/link-to}}
{{/each}}
When you click on the link, you'll get a blank page like you are now, because the BookRoute model callback isn't fired. However, the BookController#init function will be fired. You can use this to go and grab the rest of the details about the book there.
App.BookController = Ember.Controller.extend({
init: function() {
this._super();
// Replace doesNotHaveAllInfo with your check
if (doesNotHaveAllInfo) {
this.set('model', Ember.$.getJSON('/book?id=' + this.get('model.id') + '&version=' + this.get('model.version')));
}
},
});
This way, if the book is loaded through link-to, the new details will be fetched. Note that this will require that the books loaded on the index route contain at least id and version.
Alternatively, if you refresh the page, the model callback will occur, and your doesNotHaveAllInfo check will return false. Whether you click on a link-to or refresh the page, you should see your data.
I'd also recommend abstracting the Ember.$.getJSON code into a reusable method, perhaps on the model, like this:
App.Book.reopenClass({
find: function(id, version) {
return Ember.$.getJSON('/book?id=' + id + '&version=' + version);
}
});
You can then use App.Book.find() to return your model in both your route and your BookController.