EmberJS nested dynamic routes don't redirect as expected

Question

Using Ember 2.17.0, I can't seem to get routes nested under other dynamic routes to load properly.

With the following file structure I'd like the stacks route to load a new page.

features/instances/
├── edit
│   ├── route.js
│   └── template.hbs
├── index
│   ├── route.js
│   └── template.hbs
├── new
│   ├── route.js
│   └── template.hbs
└── view
    ├── route.js
    ├── stacks
    │   ├── route.js
    │   └── template.hbs
    └── template.hbs

The URL for the stacks endpoint looks like /instances/view/91467053-ba03-33b9-8950-83f0e64b4688/stacks/123456

Where 123456 is the ID of the stack model. However at the moment when I trigger the link above the page doesn't reload and I'm still on the view route. If I put a {{outlet}} tag into the view template, the content of the stacks is rendered there. But I want it on it's own page...

My router.js

Router.map(function () {
  this.route('instances', function () {

    this.route('view', {path: '/view/:instance_id'}, function () {
      this.route('stacks', {path: '/stacks/:stack_id'});
    });

    this.route('edit');
    this.route('new');
    this.route('all');

  });
  this.route('error');
});

What have I done wrong here? I can't find much about nested dynamic routes for ember 2.0+

TBieniek TBieniek · Accepted Answer · 2017-12-29T20:49:40

I hope I'm understanding your problem correctly. There are two ways to do this:

1) instead of view/template.hbs put that HTML in view/index/template.hbs, that way view/stacks/template.hbs will share none of the view template code.

2) instead of nesting the stacks route in the view route you pull up to the instances route with path: '/view/:instance_id/stacks/:stack_id', and then move the route/template files accordingly

EmberJS nested dynamic routes don't redirect as expected

2 Answers