Hi @Yeevon, this is expected when you nest routes. A general rule of thumb is “if the UI is nested use nested routes, if not use sibling routes”. See the section on nested routes in the guides. For example the application route is the main route in any ember application, and all other routes are rendered in the application template {{outlet}} tag.
It can take a little practice to get route definitions exactly how you want because there’s an interplay between the UI and the URL structure (which can affect the data loading patterns). The issue isn’t so much LinkTo or where the outlet is placed, it’s more how your router map looks. If you want the “new page” UI instead of nested UI the two routes should be siblings. If you want them to have a common URL path ancestor you could nest them BOTH under a common parent that only has an outlet in its template.
You also want to keep index routes in mind. And while I’m not 100% sure on your use case this may be what you’re looking for here. From the guides: “… an index template is used to show content that should not be present on sibling and child routes. For example, a blog app might have an index route that shows a list of all posts, but if a user clicks on a post, they should only see the content for the individual post.”
So, as an example, you could do something like this:
Router.map(function() {
this.route('index', { path: '/' }); // this is implicit, just putting it in for clarity
this.route('forum', function() {
this.route('index', { path: '/' }); // this is implicit, just putting it in for clarity
this.route('post', { path: '/:id' });
});
});
Your list of links to posts would go in templates/forum/index.hbs and the post detail would go in templates/forum/post.hbs. The UI would not be nested in this case, if you click on a post it would take you to the post detail page and would not show the index. The URL for the index would be /forum and the url for a post would be /forum/<post-id>
Or, if there are multiple forums and each has its own id, and then each forum has posts, you could do something like this
you could do something like this:
Router.map(function() {
this.route('index', { path: '/' }); // this is implicit, just putting it in for clarity
this.route('forums', function() {
this.route('index', { path: '/' }); // this is implicit, just putting it in for clarity
this.route('forum', {path: '/:forumId' }, function() {
this.route('index', { path: '/' }); // this is implicit, just putting it in for clarity
this.route('post', { path: '/:postId' });
});
});
});
Your list of links to forums would go in templates/forums/index.hbs and the forum detail (list of posts) would go in templates/forums/forum.hbs. Then your list of links to posts would go in templates/forums/forum/index.hbs and the post detail would go in templates/forums/forum/post.hbs. The URLs would look like:
- forums list:
/forums
- forum detail (post list):
/forums/<forumId>
- post detail:
/forums/<forumId/<postId>
Note that anything you put in templates/forums.hbs would appear in ANY child route, and anything you put in templates/forums/forum.hbs would appear in both the post list and post detail (because they routes are nested, the UI will be too). But by using the index routes to render the lists and a sibling detail route to render the details, you avoid nesting the UI at each level.
Anyway, hope that all makes sense and let me know if you have any follow-up questions.
