Ember - Switch from one state to another's nested state

Question

I have the following code. (I'll just copy the router, since the application has arround 500 lines at the moment) What I need, is to switch from state 'rooms' to 'guests.new'.

When i get to rooms state, it loads a template where i call the action 'newGuest' in order to change the state to the 'newGuest' screen. But i can't get it to work. On firebug I get this error:

g[a] is undefined

Here's the router code. Hope you can help me.

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

Thanks @Akash, but it's still not working. I'm using ember-1.0.pre. The template that calls 'newGuest' is the following:

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

I've also tried with ember-latest, since i've read in various threads that pre version gave some routing issues. Now turns out that with ember-latest, i can't define computed properties. At least that's what pops up on the console when loading the page.

Any clue?

Thanks a lot!

Answer 1

The problem is that Ember doesn't have access to the guests route from within the rooms route. So have you need to do is move the action function lower down the tree. I have tweaked your code a bit below:

Tweaked Code:

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