Emberjs 1.0预路由器不能找到路径状态,说路由器是未定义(Emberjs 1.0-pre r

2019-07-03 16:17发布

Emberjs路由器拒绝与jQuery的的jsfiddle onDomReady工作并返回错误; 未捕获的错误:断言失败:找不到路径状态:“根”。

然而,当我改变的jsfiddle的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>

Answer 1:

修修补补约后,我一切工作。 命名出口工程和嵌套子路线的作品。 这里是工作的jsfiddle 。 在这种的jsfiddle,如果你点击“去root.logon.index状态”,如果将呈现由称为命名出口所提供的形式{{出口洛加}}。

如果您单击名为测试部分的链接,它将使这显示两个链接到两个子部分的截面图,点击其中的任何使他们的内容。 此外,我想每一个路由器的路由的碎成许多类或单独的类,然后TAT从路由器内部延伸这些类创建新路线,跨越多个文件可模拟分裂Emberjs路由器,以减少在现实生活中的路由器大小,有效

这里是整个代码。 把手模板

 <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 router can't find state for path and says router is undefined