How to get a pagination route to load properly in Ember.js?

Question

I have a route at #/posts for posts that shows the first page of posts, and a pagination route at #/posts/:page_id that shows whatever page you request. My router looks like this:

App.Router.map(function(match) {
  //...
  this.route('posts');
  this.resource('postsPage', { path: '/posts/:page_id' });
});

And those routes look like this:

App.PostsRoute = Em.Route.extend({
  model: function(params) {
    return App.store.find(App.Post, { 'page': params.page_id });
  }
});

App.PostsPageRoute = Em.Route.extend({
  renderTemplate: function() {
    this.render('posts');
  },
  model: function(params) {
    return App.store.find(App.Post, { 'page': params.page_id });
  }
});

This worked fine for about a month after I implemented it, but it recently stopped working for anything but the #/posts route. Pages don't load, even though my REST API returns the right JSON.

Fiddle here
#/posts route here
#/posts/1 route here (note it doesn't load the content even though the JSON is sent)

Answer 1

By default, the postsPageRoute will setup the postsPage controller. You need to tell it to setup the posts controller.

App.PostsPageRoute = Em.Route.extend({
  setupController: function(controller, model) {
    this.controllerFor('posts').set('content', model)
  },
  renderTemplate: function() {
    this.render('posts');
  },
  model: function(params) {
    return App.store.find(App.Post, { 'page': params.page_id });
  }
});