Nested routes in Ember.js router and initialState

Question

I'm trying to understand emeber.js routing. I'm not really sure, why this is not valid definition of router

Platby.Router = Ember.Router.extend   
  location: 'hash'   
  enableLogging : true

  root: Ember.Route.extend
    index: Ember.Route.extend
      route: '/'
      initialState: 'batches'
      enter: (router) -> console.log 'root.index'

      batches: Ember.Route.extend
        initialState: 'index'
        route: '/batches'
        enter: (router) -> console.log 'root.index.batches'

        index: Ember.Route.extend
          route: '/'
          enter: (router) -> console.log 'root.index.batches.index'

Once proceed to the root url, I get the following output in the console.

STATEMANAGER: Entering root
STATEMANAGER: Sending event 'navigateAway' to state root.
STATEMANAGER: Sending event 'unroutePath' to state root. 
STATEMANAGER: Sending event 'routePath' to state root. 
Uncaught Error: assertion failed: Could not find state for path

Will be somebody able to explain me, where's the problem?

Looking at your code, I don't see you calling `connectOutlets`. There are a few other questions about the Router at StackOverflow you could take a look at... You might wanna look into [**this question**](http://stackoverflow.com/questions/11318572/right-way-to-do-navigation-with-ember/11319609#11319609) for example, as well as [**this guide**](http://emberjs.com/guides/router_primer/). — MilkyWayJoe, Nov 30 '12 at 14:57
This code is only snippet, to show the idea. Thank you anyway. — Jakub Truneček, Nov 30 '12 at 15:34

score 4 · Accepted Answer · answered Nov 30 '12 at 18:59

I can only answer based on the information you've given... Regarding the error uncaught Error: assertion failed: Could not find state for path, this is because you have no leaf state that matches the path "/".

root.index matches '/' but it isn't a leaf, it has a single child state batches so the router will look in the children of root.index for a match for '/' and it doesn't find one, it only finds batches (which matches '/batches') and the error is thrown. There has to be a leaf matching the route path.

As for helping with what you're actually trying to do, it looks like you want "/" to redirect to "/batches"? If that's the case:

Platby.Router = Em.Router.extend
  root: Em.Route.extend
    index: Em.Route.extend
      route: '/'
      redirectsTo: 'batches'
    batches: Em.Route.extend
      route: '/batches'
      connectOutlets: ...

You can use redirectsTo as above, which is a shortcut for:

Platby.Router = Em.Router.extend
  root: Em.Route.extend
    index: Em.Route.extend
      route: '/'
      connectOutlets: (router) ->
        router.transitionTo('batches')
    batches: Em.Route.extend
      route: '/batches'
      connectOutlets: ...

You can't use redirectsTo and have your own connectOutlets however, so if you need to do anything in root.index before transitioning to root.batches you will want to use the second way and handle your business before the transitionTo

score 0 · Answer 2 · answered Nov 30 '12 at 15:41

I'm trying to understand what it is you want to do, but by the looks of it you want /batches/ to route to root.index.batches.index and /batches to route to root.index.batches. Is that correct?

My understanding is that your root.index.batches and root.index.batches.index routes are actually the same route. If you remove the latter you should be good.

Nested routes in Ember.js router and initialState

2 Answers2