Router {{outlet}} not working

Questions Routing
1

I have the most simple router setup and it doesn’t seem to work for me.

router.js

Router.map(function () {
  this.route('home', function () {
    this.route('me');
  });
});

home.hbs

{{outlet}}

me.hbs

child

“child” isnt rendered, and the model hook doesnt seem to trigger in me.js

I can see home is being hit but nothing is passing through to the child route. I’ve been trying multiple variations with entirely different routes but it seems none of my {{outlet}} are letting anything through.

Update: Adding some clarity because I realize the title may be confusing now. Its not as if {{outlet}} is just completely broken for me - the application route is working because I can see my home template, which is rendered in the application {{outlet}}. So its clearly me doing something goofy with my use of nested routes.

2

When you say nothing is passing through to the child route do you mean you navigated to /home/me and you have a template in app/templates/home/me.hbs that isn’t being rendered?

What happens if you add some content to /app/templates/home/index.hbs and navigate to /home?

3

Thanks for responding!

I updated the question a little to be a little more clear. But yes thats exactly whats happening - none of my child routes are being rendered

Not much luck adding /home/index.hbs

4

Ok and just to hyper-clarify one last thing your route/template files are in:

/routes/home/me.js
/templates/home/me.hbs

and not

/routes/me.js
/templates/me.hbs

?

If so that’s indeed very strange. Do you have Ember Inspector installed? That can help debug routing issues as it will tell you more information about current routes being rendered in the “components” tab and also what routes are “recognized” by the app in the routes tab

5

I messed around with it some and (hopefully) to make it easier to follow I’ve changed up the names to make the hierarchy more clear. I’m also at the point where I want to try to get this working so the use is a little more aligned to what I’d like to do - use parent as a top-level route (for auth etc) and have multiple routes under it

router.js

this.route('parent', { path: '/' }, function () {
    this.route('child');
});

directory:

templates/
  application.hbs
  parent/
    index.hbs
    child.hbs

application.hbs

<Navbar>
app
{{outlet}}

parent/index.hbs

parent
{{outlet}}

child.hbs

child

With this setup im seeing a little different result:

Navigating to the root renders nav app parent (okay)

Navigating to /child renders nav app child <— where’s parent?

I think the issue may have been the route files weren’t in their correct spots, but im still not quite there

6

Ah, this is due to a subtle difference between parent and parent.index. Index is an implicit child route/template for parent, and its the default child, but if any other child is rendered it is replaced with the other child. The parent template itself (which you’d put at app/templates/parent.hbs would be where you’d put content that you want rendered any time any child of parent is rendered including index.

7

Ahh that was it totally overlooked that piece. Thank you so much for the help!

1 Like