Ember.js Emberjs 1.0-pre路由器can'；找不到路径的状态，并表示路由器未定义

这拒绝使用JSFIDLE Jquery onDomReady并返回错误未捕获错误：断言失败：找不到路径“root”的状态。

但是，当我将JSFIDLE jquery设置更改为onLoad时，页面会加载，但路由器似乎仍然无法识别，任何手动转换路由器的尝试都会失败，并显示消息错误：无法调用未定义的的方法“transitionTo”。但是，如果我单击视图中指向或链接到路由的某个操作帮助器，它将抛出错误

对于如何解决此问题的任何建议，我们将不胜感激

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

车把模板

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

嗨，萨缪
{{outlet loga}}
{{outlet}}






{{view Ember.TextField placeholder=“what”class=“userInput”}
{{outlet loga}}


从登录控制器和视图插入
从子控制器和视图插入

在修修补补之后，我把所有东西都修好了。命名的出口起作用，嵌套的子管线起作用。这是正在进行的工作。在该JSFIDLE中，如果单击“转到root.logon.index状态”，if将呈现名为{{outlet loga}}的命名出口提供的表单

如果单击名为“测试节”的链接，它将呈现节视图，其中显示两个子节的两个链接，单击其中任何一个子节将呈现其内容我还尝试将路由器中的每一条路由划分为许多类或独立类，然后创建新的路由，从路由器内部扩展这些类，以模拟在许多文件中拆分路由器，以减少现实生活中的路由器大小，它起到了作用

这是全部代码。 把手模板

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

干得好：）我一定会查看您的代码以供参考

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

   })         

 })
});