ember.js - 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 for path: "root".

However, when i change the jsfiddle jquery settings to onLoad, the page loads but the router still seems unrecognized and any attempt to do a manually transition of the router fails with the message error: Cannot call method 'transitionTo' of undefined. But if i click one of the action helpers in the view that points or links to a route, it throws the error.

Any suggestions on how to resolve this will be greatly appreciated.

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

 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',

 });

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

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

App.SectionA = Em.ObjectController.extend();
App.SectionAView = Ember.View.extend({
 templateName: "section A"
});

App.SectionB = Em.ObjectController.extend();
App.SectionBView = Ember.View.extend({
 templateName: "section B"
});

App.Router = Ember.Router.extend({
 enableLogging: true,
 location: 'hash',
 root: Ember.Route.extend({

    anotherWay: Ember.Router.transitionTo('root.logon.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, event) {
      router.get('applicationController').connectOutlet('home');
    }

  }),

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

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

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

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

      doSectionA: function(router, event) { router.transitionTo('section.sectionA'); 
      },

      sectionA: Ember.Route.extend({
        route: 'section A',
         connectOutlets: function(router, context) {
            router.get('sectionController').connectOutlet('sectionA'); 
          }

       }),

       doSectionB: function(router, event) { router.transitionTo('section.sectionB');

       },

       sectionB: Ember.Router.extend({
          route:'section B',
        connectOutlets: function(router, context) {
          router.get('sectionController').connectOutlet('sectionB');
        }
      })
    })
})
});?

The handlebar templates

  <script type="text/x-handlebars" data-template-name="application">
    <h1>Hi samu</h1>
    {{outlet loga}}
    {{outlet }}
    <a href="#" {{action showLogin }}> go to root.logon.index state</a>   
    <br>
   <a href="#" {{action anotherWay}} >it works to go to root longon index using this</a>
 </script> 

 <br>
 <script type='text/x-handlebars' data-template-name='home'> 
 </script>
 <br>
 <script type="text/x-handlebars" data-template-name="logging">

   {{view  Ember.TextField placeholder="what" class="userInput"  }}
   {{outlet loga}}
 <br>
 <b> Inserted from Login controller and view </b>

 </script>

 <script type="text/x-handlebars" data-template-name="sub_section_b_view">

   <b>Inserted from the subsection controller and view </b> 

</script>

<script type='x-handlebars' data-template-name='section A' >

</script>


<script type='x-handlebars' data-template-name='section B' >

 </script>

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

 <script type="text/x-handlebars" data-template-name="application">
   <h1>Hi Laps</h1>
   {{outlet loga}}
   {{outlet }}
    <a href="#" {{action showLogin }}> go to root.logon.index state</a>   
      <br>
  <a href='#' {{action doSection}}> testing sections</a>
 </script> 

 <br>

 <script type='text/x-handlebars' data-template-name='home'> 
 </script>

 <br>
<script type="text/x-handlebars" data-template-name="logging">
  {{view  Ember.TextField placeholder="what" class="userInput"  }}
  {{outlet loga}}
  <br>
  <b> Inserted from Login controller and view </b>       
</script>

<script type="text/x-handlebars" data-template-name="sub_section_b_view">

  <b>Inserted from the subsection controller and view </b> 
  <a href='#' {{action doSectionA}}><p>Sub section  yea</p></a>
  <br>
   <a href='#' {{action doSectionB}}> our B part yep</a>

   {{outlet}}
</script>

<script type='text/x-handlebars' data-template-name='sectionA' >
 <br>
 <font color="red">my section a is working</font>
</script>

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'
         })        

   })         

 })
});