Nested Route do not render in parent template

1

Hi, I’m new into the ember, hope yo can help me:

version: 2.10

I’m creating a nested routes but the child routes doesn’t render into the parent {{outlet}} let me show my code

Router.map(function() {
 this.authenticatedRoute('dashboard', function() {
    this.route('project', function(){
      this.route(':id');
    });
  });
})

My template structure looks like

dashboard
|_index.hbs
|__project
|___index.hbs
|___:project-id.hbs

When I go to /dashboard/

but whenever I check /dashboard/project Ember’s routering use the {{outlet}} in application.hbs instead of the {{outlet}} inside the dashboard.hbs and the navigation do not display

Can you help me please?

2

You should name the route differently, then specify the id as part of the URL.

Router.map(function() {
 this.authenticatedRoute('dashboard', function() {
    this.route('projects', function(){
      this.route('project', {path:':id'});
    });
  });
});

dashboard
|_index.hbs
|_projects
|__index.hbs
|__project.hbs

Now, if you want the projects template to display while you’re viewing a specific project, then put that code in dashboard/projects.hbs Same goes for any nested routes. Ex: dashboard.hbs will show up when viewing child routes, but dashboard/index.hbs will not.

3

Hey thank you for the answer but still render separated, I mean is not inside the dashboard/index.hbs {{outlet}}

4

Humm… you seem to have it right in your first post:

{{outlet}} inside the dashboard.hbs

But basically dashboard/index.hbs does not have an {{outlet}}, rather dashboard.hbs would. Perhaps I’m not following the question/issue. Can you make an ember-twiddle of your problem? https://ember-twiddle.com/

5

Thanks again, and sorry for the communication issues, here is the example

The Twiddle example

If you visit /dashboard/ display the content inside the application.hbs but when you visit /dashboard/projects/ the content of the file display into application.hbs {{outlet}} instead the dashboard/index.hbs {{outlet}}

Did I explain my self better?

Thaks for your help

6

Ah, yeah, so I think the index files are tripping you up. Index files are only displayed when you are at that path specifically. If you’re in a child route, then you won’t see the index files. For example, when you’re at /dashboard you’ll get the following templates;

  • application.hbs
  • dashboard.hbs (within application.hbs {{outlet}})
  • dashboard/index.hbs (within dashboard.hbs {{outlet}})

Now let’s say you visit /dashboard/projects, then you’ll get;

  • application.hbs
  • dashboard.hbs (within application.hbs {{outlet}})
  • dashboard/projects.hbs (within dashboard.hbs {{outlet}})
  • dashboard/projects/index.hbs (within dashboard/projects.hbs {{outlet}})

The other thing to note is that routes that don’t have further nested routes don’t really need an index.hbs file. Rather the route-name.hbs file serves as the “last” template. So let’s say you visit /dashboard/projects/123;

  • application.hbs
  • dashboard.hbs (within application.hbs {{outlet}})
  • dashboard/projects.hbs (within dashboard.hbs {{outlet}})
  • dashboard/projects/project.hbs (within dashboard/projects.hbs {{outlet}})

Notice how the index.hbs was switched out with just project.hbs. While you could also have dashboard/projects/project/index.hbs, you don’t really need it.

I’ve updated your twiddle to clarify all the different routes and what templates are showing. Perhaps that’ll help clarify things as well;

3 Likes
7

Thanks so much…

I can see clearly now, the rain is gone (singing)

Is a good explanation for the loading templates phase.

8

Exactly. So there is a loading.hbs at the same “level” as the index.hbs. In the case of a project, it would be /dashboard/projects/project/loading.hbs

9

Nice, a simple question:

Do you know if applies similar in routes, controllers and models?

10

Yes, the same sort of structure for routes and controllers. Models are a bit different since they don’t have to match route names.