Emberjs 1.0-pre router can't find state for path and says router is undefined

Question

This Emberjs router refuses to work with jsfiddle Jquery onDomReady and returns the error ; Uncaught Error: assertion failed: Could not find state f

Answer 1

After tinkering about, i go everything working. The named outlet works and the nested sub-route works. Here is the working jsfiddle. In that jsfiddle, if you click, 'go to root.logon.index state' if will render the form being provided by the named outlet called {{outlet loga}}.

If you click the link called testing sections, it will render the section view which displays two link to two sub-sections, click on any of them renders their content. Also i tried to break each of the routes in the Router into many classes or standalone classes and then creating new routes tat extending those classes from inside the Router, to simulate splitting Emberjs Router across many files to reduce the Router size in real life situations and it worked

Here is the whole code. Handlebars template

Javascript/Emberjs bit

App = Ember.Application.create({
  ready: function(){ 
  //App.router.transitionTo('root.home');
  }
});

App.stateFlag = Ember.Mixin.create({
    stateFlag: function(name) {
    var state = App.get('router.currentState.name'); 
    while (state.name === name) {
        state = state.get('parentState');
        console.log('state');
        //return true;
     }
   }.property('App.router.currentState')
});


App.ApplicationController = Em.Controller.extend();

App.ApplicationView = Ember.View.extend({
 templateName: 'application'
});

App.HomeController = Em.ObjectController.extend();
App.HomeView = Em.View.extend({
  templateName: 'home'
});

App.LoginController = Em.ObjectController.extend();

App.LoginView = Ember.View.extend({
 tagName: 'form',
 templateName: 'logging',
 /* class name does not work */
 className: ['userInput']
});


App.SectionController = Em.ObjectController.extend(App.stateFlag, {
  stateFlag: 'sectionB'
});

App.SectionView = Ember.View.extend({
  templateName: "sub_section_b_view"
});

App.SectionAController = Em.ObjectController.extend();
App.SectionAView = Ember.View.extend({
  templateName: "sectionA"
});

App.SectionBController = Em.ObjectController.extend();
App.SectionBView = Ember.View.extend({
 templateName: "sectionB"
});


App.SectionARoute = Ember.Route.extend({
  connectOutlets: function(router, context) {
   router.get('sectionController').connectOutlet({viewClass: App.SectionAView}); 
   }                  
});

App.SectionBRoute = Ember.Route.extend({
 connectOutlets: function(router, context) {
  router.get('sectionController').connectOutlet({viewClass: App.SectionBView});
 }
});


App.Router = Ember.Router.extend({
 enableLogging: true,
 location: 'hash',
 root: Ember.Route.extend({
   anotherWay: Ember.Router.transitionTo('root.logon.index'),
   doSection: Ember.Router.transitionTo('root.section.index'),

   showLogin: function(router, event) {       
       router.transitionTo('root.logon.index');
   },

   doHome: function(router, event) {
      router.transitionTo('home');
   },
   doSections: function(router, event) {
      router.transitionTo('section.index');
   },
   home: Ember.Route.extend({
      route: '/',
      connectOutlets: function(router) {
      router.get('applicationController').connectOutlet('home');
       }

   }),

   logon: Ember.Route.extend({
      route: '/login',
      enter: function(router) {
         console.log("The login sub-state was entered.");
      },

      index: Ember.Route.extend({
         route: '/',
         connectOutlets: function(router, context) {
            router.get('applicationController').connectOutlet('loga', 'login');
         }
      })
    }),

    section: Ember.Route.extend({
        route: '/section',
        doSectionA: Ember.Router.transitionTo('section.sectionA'),
        doSectionB: Ember.Router.transitionTo('root.section.sectionB'),

        connectOutlets: function(router, event) {
                router.get('applicationController').connectOutlet('section');
        },

        index: Ember.Route.extend({
             route:  '/'            
        }),


         sectionA: App.SectionARoute.extend({
             route: '/sectionA'
         }),

         sectionB: App.SectionBRoute.extend({
             route: '/sectionB'
         })        

   })         

 })
});