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(); 
        } 
       }) 
      }) 
     }) 
    });