ember.js - transitiontoroute - El enrutador Emberjs 1.0-pre no puede encontrar el estado de la ruta y dice que el enrutador no está definido

emberjs transitiontoroute

Question

Este enrutador Emberjs se niega a trabajar con jsfiddle Jquery onDomReady y devuelve el error; Error no detectado: error de aserción: no se pudo encontrar el estado de la ruta: "raíz" .

Sin embargo, cuando cambio la configuración de jsfiddle jquery a onLoad , la página se carga pero el enrutador aún parece no reconocido y cualquier intento de hacer una transición manual del enrutador falla con el mensaje de error: No se puede llamar al método ''transitionTo'' de undefined . Pero si hago clic en uno de los ayudantes de acción en la vista que señala o vincula a una ruta, arroja el error.

Cualquier sugerencia sobre cómo resolver esto será muy apreciada.

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

Las plantillas del manillar

  <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

Después de retocar, hago que todo funcione. La salida indicada funciona y la subruta anidada funciona. Aquí está el jsfiddle de trabajo . En ese jsfiddle, si hace clic en ''ir al estado de root.logon.index'' si el formulario proporcionado lo proporcionará la salida llamada {{outlet loga}} .

Si hace clic en el enlace denominado secciones de prueba , se mostrará la vista de sección que muestra dos enlaces a dos subsecciones, haga clic en cualquiera de ellos representa su contenido. También traté de dividir cada una de las rutas en el enrutador en muchas clases o clases independientes y luego crear nuevas rutas para extender esas clases desde dentro del enrutador, para simular la división del enrutador Emberjs en muchos archivos para reducir el tamaño del enrutador en situaciones de la vida real y funcionó

Aquí está el código completo. Plantilla de manubrios

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

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

   })         

 })
});