How can I repeat a resource in Ember.js

I have a page resource that uses the page title in the url.

App.Router.map(function () {
    this.resource('page', {
        path: '/:page_id'
    });
});

App.PageRoute = Ember.Route.extend({
  serialize: function(model) {
    return { page_id: model.title};
  }
});

That is working fine in this jsbin. However, I would like to have subpages nested in the url like this:

localhost/#/main_page/sub_page

I tried to make a sub resource (jsbin), but I'm not sure if it is the right approach.

App.Router.map(function () {
    this.resource('page', {path: '/:page_id'},
                  this.resource('subpage', {path: '/:page_id/:subpage_id'}));
});

There are two main problems in my attempt: I have to repeat my page view and it doesn't retain the parent page in the url. I'm getting:

localhost/#/undefined/sub_page

Am I heading in the right direction? Can this be accomplished with just one resource?

Thanks in advance!