In latest Ember, how do you link to a route with just the id/name of a model, rather than providing all of its attributes in the linking page?

Question

I ran into a problem when converting from Ember 1.0-pre2 to latest master (43354a98) and the new router, namely--

If I have a route which loads just the name and ID for a bunch of records, and tries to link each of those records to another route which should display the full model, when I arrive at the new route, the new model is never loaded, and name and ID are the only attributes that are available.

Example code:

App.Router.map(function() {
  this.route("index");
  this.resource("birds");
  this.resource("bird", {
    path: "/birds/:bird_id"
  });
});

App.BirdsController = Ember.ArrayController.extend({
  birds: [
    {
      name: "Pigeon",
      id: "b.15"
    }, {
      name: "Chicken",
      id: "b.133"
    }, {
      name: "Turkey",
      id: "b.126"
    }, {
      name: "Ostrich",
      id: "b.4"
    }, {
      name: "Barn Owl",
      id: "b.47"
    }
  ]
});

App.BirdRoute = Ember.Route.extend({
  model: function(params) {
    return App.Bird.find(params.bird_id);
  }
});

{{#each bird in birds}}
  <li>{{#linkTo "bird" bird}}{{bird.name}}{{/linkTo}}</li>
{{/each}}

where App.Bird.find() runs some XHR's to build up an Ember.Object from a set of remote API's (not using ember-data). The list of birds is hardcoded into the controller just for this example, to simplify the issue; in my real application, the list is coming from a remote API.

The behavior I'm seeing is that if you start on /birds and click one of the links, the router transitions to 'bird' and you arrive on /#/birds/b.5, but App.Bird.find() is never called, and the only data I have on the page are "name" and "id". However, if you then reload the page, it does call App.Bird.find() and properly builds up and displays the model.

Is there some way to force deserialization from the ID in the URL, or to just pass an ID to linkTo rather than an object that it will assume is complete? I had an analogous implementation working fine with the old router.

Answer 1

It seems like the model hook for App.BirdRoute never gets called when navigating using {{#linkTo}}... maybe this is because using {{#linkTo}} you are passing an object to the route from the birds route and ember doesn't think you should need to call model since it thinks the id has already been deserialized into an object. This seems to make sense since model gets called when you reload the page.

I used the setupController hook to call your App.Bird.find() method and pass that result into the controller. This gets called by either a direct URL or through a {{#linkTo}} click. If called by the {{#linkTo}} helper link setupController the model parameter will be the bird object passed with the {{#linkTo}} helper. If called directly from the URL the returned value from the model hook will be passed into setupController as the model parameter.

Here is a JSFiddle example

example with accessible URL

App.BirdRoute = Ember.Route.extend({
  model: function(params) {
    return {id: params.bird_id};
  },
  setupController: function(controller, model) {
    var bird_model = App.BirdTest.find(model.id);
    controller.set("content", bird_model);
  }
});