CODEWITHSUNDEEP
ember.jsroutes
Gregg
Gregg

Reputation: 35904

Proper Use of Nested Routes

I was trying to get the following working:

Router.map(function() {
    this.route('games', function() {
        this.route('game', {path: '/:game_id'}, function() {});
    });
});

I had a directory structure like so:

templates
  - games
    - index.hbs
    - game.hbs

Clearly, this wasn't working. I couldn't really figure out how to get game.hbs to render. After doing some research, I stumbled on an article from 2013 and that led me to this solution:

Router.map(function() {
    this.route('games', function() {});
    this.route('game', {path: 'games/:game_id'}, function() {});
});

templates
  - games
    - index.hbs
  - game
    - index.hbs

Note that I had to include the empty function() { } in both routes to get the subdirectory structure to work.

I'm using Ember 1.13.7 and I'm wondering if this is still the correct approach. Or is there a way I can nest the game route without having anything additional on the path to get it to work?

Upvotes: 0

Views: 602

Answers (2)

Tom Netzband
Tom Netzband

Reputation: 1110

A simple way to think about nested routes is this: Do you want your UI to be nested? If you do, then nest the routes. If you do not want your UI to be nested, then do not nest your routes.

I could go on but there is a really good (and recent) article regarding this that you may want to check out - http://fromrailstoember.com/9-nested-routes-equals-nested-ui/

Just wanted to leave this answer here so people know that there is a method behind nested routes. I see you got it working but you should still make sure it's done the way the framework intended you to do it.

Upvotes: 3

Gregg
Gregg

Reputation: 35904

I figured this out...

Router.map(function() {
    this.route('games', function() {
        this.route('game', {path: '/:game_id'}, function() {});
    });
});

I can define the route like above and the link-to helper has to change from:

{{#link-to 'game' this}}{{title}}{{/link-to}}

to 

{{#link-to 'games.game' this}}{{title}}{{/link-to}}

Upvotes: 0

Related Questions