ToRouter Emberjs odmawia pracy z jsfiddle Jquery onDomReady i zwraca błąd;Nieprzechwycony błąd: asercja nie powiodła się: nie można znaleźć stanu ścieżki: „root”.

Jednak gdy zmieniam ustawienia jquery jsfiddle naonLoad, strona ładuje się, ale router nadal wydaje się nierozpoznany i każda próba ręcznego przejścia routera kończy się niepowodzeniem z komunikatembłąd: Nie można wywołać metody „przejście do” niezdefiniowanej. Ale jeśli kliknę jeden z pomocników akcji w widoku, który wskazuje lub łączy z trasą, zgłasza błąd.

Wszelkie sugestie dotyczące rozwiązania tego problemu zostaną bardzo docenione.

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

Szablony kierownicy

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