ember linkTo sending empty params in route's model hook

Question

I have a blog site where going to the url /posts should list all posts. Then clicking a link for /posts/:post_id should display the details of that post. However, when clicking the link, it seems that the linkTo is not passing the :post_id properly. Here is my code:

Router:

App.Router.map(function() {
  this.resource("posts", function() {
    this.resource("post", { path: "/:post_id" }, function() {
      //other routes
    });
  });

  this.route("posts.index", { path: "/" });//Links root url to posts index template
});

Routes:

/****** Posts ******/
App.PostsRoute = Ember.Route.extend({

});

App.PostsIndexRoute = Ember.Route.extend({
  model: function() {
    return App.Post.find();
  }
});

/****** Post *******/
App.PostRoute = Ember.Route.extend({

});

App.PostIndexRoute = Ember.Route.extend({

});

Controllers:

/****** Posts ******/
App.PostsController = Ember.ArrayController.extend({

});

App.PostsIndexController = Ember.ArrayController.extend({

});


/****** Post ******/
App.PostController = Ember.ObjectController.extend({

});

App.PostIndexController = Ember.ObjectController.extend({

});

Posts/Index Template:

{{#each post in controller}}
  <tr>
    <td>{{post.name}}</td>
    <td>{{post.title}}</td>
    <td>{{post.content}}</td>
    <td>{{#linkTo post.index post}}View{{/linkTo}}</td>
  </tr>
{{/each}}

Every time I click the {{linkTo post.index post}}, it takes me to the correct url, renders the correct templates (post/index), but nothing displays. I tried putting a model hook in the PostIndexRoute like this:

App.PostIndexRoute = Ember.Route.extend({
  model: function(params) {
    return App.Post.find(params.post_id);
  }
});

But params = {} It has no data in it. Can someone point me in the right direction? what am I doing wrong?

i'm not sure, but could it be that you need to call return this.modelFor("post"); in your PostIndexRoute's model hook? — Finn MacCool
it makes your PostIndexRoute use the model of your PostRoute, but apparently, your problem could be solved without that. — Finn MacCool

CraigTeegarden CraigTeegarden · Accepted Answer · 2013-04-11T16:58:16

Since you are passing the post object you need to {{linkTo}} a route that accepts a dynamic URL segment. In your example posts.index doesn't accept a parameter.

<td>{{#linkTo post post}}View{{/linkTo}}</td>

Here is an example of a way to structure your code to better handle the routing: JSBin example

You should also check out the Ember.js routing guides as an example of how to structure routes.

ember linkTo sending empty params in route's model hook

1 Answers