EmberJs outlet inside multiple nested route

Question

I do not strictly understand outlets and rendering templates in EmberJS. Until now I have been doing mostly CRUD operations or my routes weren't nested as many times as here so I haven't faced this problem yet. Using {{outlet}} in parent route was enough.

The problem comes with my approach that I used to. Everything works fine when I do visit routes admin/* , but when I try to get into eg admin/organization/{id}/user it renders an admin/organization template what I would want to avoid. I suppose these things can be done using renderTemplate( ) function inside route.js but I can't figure these things out.

I recreated my routes structure in [twiddle]

Could someone explain to me that, please?

Answer 1

Nested routes always have nested templates. To workaround, you can utilize index route, which exists on every level by default. Structure of your templates will be like this:

-app
--templates
---admin
----organization
-----index.hbs //template for admin/organization/index route, url: /admin/organization
-----user.hbs //template for admin/organization/user route, url: /admin/organization/user
----index.hbs //template for admin/index route, url: /admin

Note that if some template file does not exist (in my example app/templates/admin.hbs , app/templates/admin/organization.hbs do not exist), it's the same as having .hbs file with only {{outlet}} in it