Ember - 从一种状态切换到另一种状态

Question

我有以下代码。 （我只是复制路由器，因为此时应用程序有500条线） 我需要的是从状态'房间'切换到'guests.new'。

当我到达房间状态时，它会加载一个模板，我将其称为动作'newGuest'，以便将状态更改为'newGuest'屏幕。但我无法实现它的工作。 在萤火虫我得到这个错误：

g[a] is undefined 

这里的路由器代码。 希望你能帮助我。

App.Router = Ember.Router.extend({ 
     enableLogging:true, 
     location:'hash', 
     gotoRooms:Ember.Route.transitionTo('rooms.index'), 
     gotoGuests:Ember.Route.transitionTo('guests.index'), 
     gotoBookings:Ember.Route.transitionTo('bookings'), 
     gotoHome:Ember.Route.transitionTo('root.index'), 

     root:Ember.Route.extend({ 
      index:Ember.Route.extend({ 
       route:'/', 
       connectOutlets:function (router) { 
        App.HomeView.appendTo('#main-content .container_12'); 
       }, 
       enter: function(){ 
        console.log('Entro Home'); 
       }, 
       exit: function(){ 
        App.HomeView.remove(); 
       } 
      }), 
      guests:Ember.Route.extend({ 
       route:'/guests', 
       index:Ember.Route.extend({ 
        route:'/', 
        connectOutlets:function(router) { 
         App.GuestsView.appendTo('#main-content .container_12');  
        }, 
        enter: function(){ 
         console.log("Entro Guests"); 
        }, 
        exit: function(){ 
         App.GuestsView.remove(); 
        }, 
       }), 
       new:Ember.Route.extend({ 
        route:'/new/:bed', 
        deserialize: function(manager, params) { 
         console.log('New Guest \nBed:'+params['bed']+"\n Date:"+params['date']); 
         App.GuestView.appendTo('#main-content .container_12'); 
        }, 
        connectOutlets:function(){ 
         alert("hola"); 
        }, 
        exit: function(){ 
         App.GuestsView.newGuestView.remove(); 
        } 
       }) 
      }), 
      rooms:Ember.Route.extend({ 
       newGuest:Ember.Route.transitionTo('guests.new'), 
       route:'/rooms', 
       index:Ember.Route.extend({ 
        route:'/',      
        connectOutlets:function(router) { 
         App.RoomsView.appendTo('#main-content .container_12');  
        }, 
        enter: function(){ 
         console.log("Entro Rooms"); 
        }, 
        exit: function(){ 
         App.RoomsView.remove(); 
        } 
       }) 
      }) 
     }) 
    }); 

谢谢@Akash，但它仍然无法正常工作。 我使用的是ember-1.0.pre。 调用“newGuest”模板如下：

<script type="text/x-handlebars" data-template-name="rooms"> 
     {{#each room in App.Rooms}} 
     <div class="grid_4"> 
     <div class="block-border"> 
     <div class="block-header"> 
      <h1>{{room.screen}}</h1><span></span> 
     </div> 
     <div class="block-content"> 
      <ul class="block-list"> 
      {{#each bed in room.camas}} 
      {{#if bed.guestId}} 
      <li {{action "viewGuest" on="click"}} class="occupied">{{bed.id_guest}}</li> 
      {{else}} 
      <li class="free" {{action "newGuest" on="click"}}>Free Bed</li> 
      {{/if}} 
      {{/each}} 
      </ul> 
     </div> 
     </div> 
    </div> 
     {{/each}} 
    </script> 

我也试着与Ember，最新的，因为我在之前的版本提出了一些路由问题不同的线程读过。 现在事实证明，与最新的烬，我不能定义计算属性。至少这是加载页面时在控制台上弹出的内容。

任何线索？

非常感谢！

Answer 1

问题是Ember无法访问rooms路由中的guests路由。所以你需要做的是将动作函数移到树下。我已经优化了你的代码略低于：

调整了代码：

App.Router = Ember.Router.extend({ 
     enableLogging:true, 
     location:'hash', 
     gotoRooms:Ember.Route.transitionTo('rooms.index'), 
     gotoGuests:Ember.Route.transitionTo('guests.index'), 
     gotoBookings:Ember.Route.transitionTo('bookings'), 
     gotoHome:Ember.Route.transitionTo('root.index'), 

     root:Ember.Route.extend({ 
      newGuest:Ember.Route.transitionTo('guests.new'), 
      index:Ember.Route.extend({ 
       route:'/', 
       connectOutlets:function (router) { 
        App.HomeView.appendTo('#main-content .container_12'); 
       }, 
       enter: function(){ 
        console.log('Entro Home'); 
       }, 
       exit: function(){ 
        App.HomeView.remove(); 
       } 
      }), 
      guests:Ember.Route.extend({ 
       route:'/guests', 
       index:Ember.Route.extend({ 
        route:'/', 
        connectOutlets:function(router) { 
         App.GuestsView.appendTo('#main-content .container_12');  
        }, 
        enter: function(){ 
         console.log("Entro Guests"); 
        }, 
        exit: function(){ 
         App.GuestsView.remove(); 
        }, 
       }), 
       new:Ember.Route.extend({ 
        route:'/new/:bed', 
        deserialize: function(manager, params) { 
         console.log('New Guest \nBed:'+params['bed']+"\n Date:"+params['date']); 
         App.GuestView.appendTo('#main-content .container_12'); 
        }, 
        connectOutlets:function(){ 
         alert("hola"); 
        }, 
        exit: function(){ 
         App.GuestsView.newGuestView.remove(); 
        } 
       }) 
      }), 
      rooms:Ember.Route.extend({ 
       route:'/rooms', 
       index:Ember.Route.extend({ 
        route:'/',      
        connectOutlets:function(router) { 
         App.RoomsView.appendTo('#main-content .container_12');  
        }, 
        enter: function(){ 
         console.log("Entro Rooms"); 
        }, 
        exit: function(){ 
         App.RoomsView.remove(); 
        } 
       }) 
      }) 
     }) 
    });