Change path of template file in ember router

Question

My router looks like this at the moment:

Router.map(function() {
    this.route('item1');
    this.route('item2');
    this.route('item3', function(){
        this.route('sub-item', { path: '/sub-item' });
    });
});

And my templates folder looks like this:

Now when I have a hyperlink like:

{{link-to 'Sub Item' 'item3.sub-item'}}

This navigates to the sub-item.hbs inside the item3 folder. How can I change the path of the nested sub-item route so that it renders the sub-item.hbs file in the templates folder instead? I tried changing it to this.route('sub-item', { path: '../sub-item' }); but that didn't work.

Answer 1

You will need to reset the namespace this.route('sub-item', { path: '/sub-item', resetNamespace: true }); and move the item3/sub-item.hbs to sub-item/index.hbs.

And your link to path becomes {{link-to 'Sub Item' 'sub-item.index'}} sub-item if you want to preserve the active class that ember automatically adds to links.