CODEWITHSUNDEEP
ember.js
user10683480
user10683480

Reputation:

How to render nested route in new page Ember js?

I currently trying use LinkTo to render another nested route by using {{outlet}} tag to another new page.

I have a forum route and nested forum details route

In the forum template:

<LinkTo @route="main.forum.forum-details" @model={{post}}>{{post.title}}</LinkTo>

{{outlet}}

enter image description here

As the image above. The nested route will be render at the bottom instead of to the new page. How am i going to render it to new page? I was thinking LinkTo will actually link it to the new page right? And the forum details should be render at the {{outlet}} tag, so where should I place the {{outlet}} tag in order to let it render to new page?

Upvotes: 2

Views: 145

Answers (1)

Lux
Lux

Reputation: 18240

You problem is that you need to understand nested routes.

If your route is main.forum.forum-details this means your router looks like this:

this.route('main', function() {
  this.route('forum', function() {
    this.route('forum-details');
  });
});

So the forum route is a parent route of the forum-details route.

And its important to understand that parent routes are always visible when visiting a child route.

So for the main.forum.forum-details ember will render your application route and inside its {{outlet}} it will render the forum route and inside this {{outlet}} it will render the forum-details route.

So if you want either the forum or the forum-details route you can restructure your routes:

this.route('main', function() {
  this.route('forum');
  this.route('forum-details');
});

or you can move what you currently have in your forum route to your forum.index route. If a route has subroutes and none of the subroutes is active there will always be an index route active that you can use.

Upvotes: 1

Related Questions