Disconnecting outlets/removing views when changing states in Ember router?

Question

I have an application with an application template that has two outlets. When I enter the root.index state, I only want one outlet to be connected, and when I enter the root.chats state, I want both outlets to be connected. This works fine when I navigate from root.index to root.chats, but when I navigate back the navpane outlet is still present (as it should be). How do I go about disconnecting this outlet or removing the view that was hooked up in the first place? Is the disconnectOutlet method for the controller mixin deprecated? Should I be structuring this completely differently? I've included my code below. Thanks.

// State flag helper function. See https://github.com/ghempton/ember-router-example/blob/master/js/app.js

function stateFlag(name) {
  return Ember.computed(function() {
    var state = App.router.currentState;
    while(state) {
      if(state.name === name) return true;
      state = state.get('parentState');
    }
    return false;
  }).property('App.router.currentState');
}

// Application

App = Em.Application.create({

    ApplicationController: Ember.Controller.extend({
        isChats: stateFlag('chats')
    }),
    ApplicationView: Ember.View.extend({
        templateName: 'application'
    }),
    ChatlistController:  Em.Controller.extend({
        hideView: false
    }),
    ChatlistView:  Em.View.extend({
        templateName:  'chatlist',
        didInsertElement: function(){
            this.$("#nav_pane").css({'left':'-=275', 'z-index':'-5'}).animate({
                left: ["+=275", 'swing'],
            },500,function() {
                $(this).css('z-index','5')
            });
        },
        _hideViewChanged: function() {
            if (this.get('hideView')) {
                this.hide();
            }
        }.observes('hideView'),
        hide: function() {
            var that = this;
            this.$("#nav_pane").hide("slow", function() {
                that.remove();
            });
        }
    }),
    ChatroomController:  Em.Controller.extend({

    }),
    ChatroomView:  Em.View.extend({
        templateName:  'chatroom'
    }),
    DashboardController:  Em.Controller.extend({

    }),
    DashboardView:  Em.View.extend({
        templateName:  'dashboard'
    }),
    Router: Ember.Router.extend({
        //location: 'history',
        enableLogging: true,
        goToDashboard:  Ember.Route.transitionTo('root.index'),
        goToChats:  Ember.Route.transitionTo('root.chats'),
        root:  Ember.Route.extend({
            index:  Ember.Route.extend({
                route:  '/',
                connectOutlets: function(router, context) {
                    router.get('applicationController').connectOutlet('content', 'dashboard');
                }
            }),
            chats:  Ember.Route.extend({
                route:  '/chats',
                connectOutlets: function(router, context) {
                    router.get('applicationController').connectOutlet('navpane', 'chatlist');
                    router.get('applicationController').connectOutlet('content', 'chatroom');
                }
            }),
            files:  Ember.Route.extend({
                route:  '/files'
            })
        })
    })
});

App.initialize();

This is pretty much the exact same question I asked immediately below yours. Wonder how that happened. In my case, outlets used by subpages in an extended example on Embers on website remain connected even though they shouldn't when you navigate back to the home page. — Mark, Oct 21 '12 at 08:42

Trek Glowacki · Accepted Answer · 2012-10-21T22:05:52.207

I believe you're looking for disconnectOutlet, which is not at all deprecated: http://emberjs.com/api/classes/Ember.Controller.html#method_disconnectOutlet

A good place for it to live is on the route's exit event: http://emberjs.com/api/classes/Ember.State.html#event_exit

chats:  Ember.Route.extend({
    route:  '/chats',
    connectOutlets: function(router, context) {
        router.get('applicationController').connectOutlet('navpane', 'chatlist');
        router.get('applicationController').connectOutlet('content', 'chatroom');
    },
    exit: function(router){
      router.get('applicationController').disconnectOutlet('chatroom');
    }
}),

Just realized that the pre-release build of ember didn't contain commits past August 3rd. Working perfectly now. Thanks. — Max Gillett, Oct 21 '12 at 21:42

Disconnecting outlets/removing views when changing states in Ember router?

1 Answers1