Emberjs 1.0-pre路由器找不到路径状态，表示路由器未定义 [英] Emberjs 1.0-pre router can't find state for path and says router is undefined

问题描述

此 Emberjs路由器 拒绝使用jsfiddle Jquery onDomReady并返回错误 ; 未捕获错误：断言失败：找不到路径的状态：root。

但是，当我将jsfiddle jquery设置更改为 onLoad ，页面加载，但路由器仍然似乎无法识别，并且尝试手动转换路由器的尝试失败，并显示消息错误：无法调用未定义的方法transitionTo。但是，如果我点击视图中的一个动作助手来指向或链接到路线，则会抛出错误。

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

手柄模板

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

推荐答案

修补后，我去一切工作。指定的出口工程和嵌套子路线工程。这里是工作的 jsfiddle 。在这个jsfiddle中，如果你点击转到root.logon.index状态，如果将呈现由名为 {{outlet loga}} 的命名插座提供的表单。

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

如果您点击测试部分的链接，它将渲染截图视图，其中显示两个链接到两个子部分，点击其中任何一个呈现其内容。此外，我还试图将路由器中的每个路由器分解成许多类或独立类，然后创建新的路由，从路由器内部扩展这些类，以模拟许多文件中的Emberjs路由器，从而减少路由器的大小生活情况，它的工作

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

这是整个代码。
手柄模板

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

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

   })         

 })
});

这篇关于Emberjs 1.0-pre路由器找不到路径状态，表示路由器未定义的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！