Nested routes in ember engine routes.js?

Question

How to define nested routes in ember routable engine? I can't navigate to beyond 2 trees. Like, For example

All posts
 Post
   Comments
     Comment

I can access

localhost:4200/posts/:postid/

But when I access

localhost:4200/posts/:postid/comments/:commentid

Its not rendering the content for comments template. But it doesn't show any error either.

Answer 1

In your terminal

$ ember g route posts
$ ember g route posts/post
$ ember g route posts/post/comments
$ ember g route posts/post/comments/comment

In your router.js, replace the contents by the following

Router.map(function(){
    this.route('posts', function() {
        this.route('post', {path: '/:post_id' }, function() {
            this.route('comments', function() {
                this.route('comment', {path: '/:comment_id'});
            });
        });
    });
});

This is a solution, But what I prefer is , define an index sub-route in every main routes, for example ember g route posts/index and add it into your router.js like

this.route('posts', function() {
    this.route('index', {path: '/'});
    this.route('post', {path: '/:post_id'}, function() {
        .....
        .....
    });
});

add an index sub route every time