How should I properly use Ember.js nested routing?

Question

I have this route part, /articles/. I would like to create subroutes here, like / and /list/. This is how I am trying:

articles: Ember.Route.extend({
    route: '/admin/articles',
    index: Ember.Route.extend({
        route: '/',
        connectOutlets: function (router, context) {
            "use strict";
            router.get('applicationController').connectOutlet('toolbar', 'articlesToolbar');
            router.get('applicationController').connectOutlet('main', 'articles');
        }
    }),
    list: Ember.Route.extend({
        route: '/list/',
        connectOutlets: function (router, context) {
            "use strict";
            router.get('applicationController').connectOutlet('toolbar', 'articlesToolbar');
            router.get('applicationController').connectOutlet('main', 'articles');
        }
    }),
    doLogout: function(router, context) {
        "use strict";
        router.transitionTo('login', context);
    }
}),

i must be doing something wrong, because it does not transition to the articles route. This is my routing log:

STATEMANAGER: Sending event 'doSidebar' to state root.
STATEMANAGER: Entering null
STATEMANAGER: Entering root
STATEMANAGER: Entering root.articles
STATEMANAGER: Sending event 'doSidebar' to state root.
STATEMANAGER: Entering null
STATEMANAGER: Entering root
STATEMANAGER: Entering root.media

But the articles url is not registered to the history -- if I click back, I get to the previous state, the one before articles.

What am I doing wrong?

score 4 · Accepted Answer · answered Sep 11 '12 at 23:58

4

You cannot route to non-leaf states, so you cannot transition to 'articles'.
Either add initialState: 'index' to your articles route or change your code to transition to 'articles.index'

articles: Ember.Route.extend({
  route: '/admin/articles',
  initialState: 'index',
  index: Ember.Route.extend({
    //

answered Sep 11 '12 at 23:58

Bradley Priest

7,438
1
29
33

InitialState it is. I knew about the leaf rule, but not about initialState. Thx! – Eduárd Moldován Sep 12 '12 at 04:32

score 0 · Answer 2 · answered Sep 11 '12 at 23:30

0

You have no route defined for /articles. You need to change route: '/admin/articles' to route: '/articles' .

answered Sep 11 '12 at 23:30

Nick Vanderbilt

2,475
3
27
33

How should I properly use Ember.js nested routing?

2 Answers2