Dynamic segments for nested ember routes not working

Question

I have a nested route structure:

 //router.js

  this.route('maps', { path: '/maps' }, function () {
    this.route('show', { path: '/:id' }, function () {
      this.route('display', { path: '/display' }),
      this.route('layers', function () {
        this.route('create')
      })
    });
  });

my understanding here is that I should have a route maps.show.display that should take a single dynamic segment like maps/1/display

However when I go to transition or link to this ie:

//maps route

afterModel: function (resolvedModel) {
 var newestFlight = resolvedModel.content[0];
 var newestMap = newestFlight.get('map');
 this.transitionTo('maps.show.display', newestMap);
}

or

{{#link-to 'maps.show.display' id}}show map{{/link-to}}

I get an error:

 Error while processing route: maps.index More context objects were passed than there are dynamic segments for the route: maps.show.index

It makes it even weirder that this route accepted the same dynamic segment when it was just maps/display so I don't understand why nesting it further breaks it.

Any ideas as to what I'm doing wrong would be greatly appreciated

edit: interestingly, this awesome tool

also seems to agree that I should have a dynamic segment here if you post my route in there

Answer 1

It works fine for me: http://emberjs.jsbin.com/rofowuneni/1/edit?html,css,js,output

BTW I think this:

this.route('display', { path: '/display' });
this.route('layers', function () {
  this.route('create')
});

Is supposed to be (not that it matters):

this.route('display', { path: '/display' });
this.route('layers', function () {
  this.route('create');
});

What's your ember version?