Documentation for the opposite of Ember.Routable#connectOutlets

[pixelcort]

I've got a state with connectOutlets set up, however when I leave that state I'd like those outlets to be cleared out. There doesn't seem to be any documentation about how to go about doing this.

For example, check out http://fiddle.jshell.net/N2NRF/19/show/. Click a post, and then click the back button. Note the specific post still appears.

There doesn't appear to be an equivalent disconnectOutlets. Is this feature not fully implemented, or is there a different way to disconnectOutlets when leaving a state?

The other thing I tried was to add a conenctOutlets to the index leaf state and try to call connectOutlet without any arguments, but that resulted in an error.

[wagenet]

In general you wouldn't need to clear out your outlets. The other states your transitioning to should overwrite the outlets. If you have outlets at a root level that are only used by one state then I think you're probably not using them in an ideal fashion. However, if you really do need to do this, you could create an exit method on your state.

[pixelcort]

@wagenet so in this case should I have a blank controller and view to set as the outlet in the index leaf state?

[wagenet]

@pixelcort No, definitely not. What I'm saying is that it doesn't seem to me that you should ever have an unconnected outlet in a state. Therefore, when you switch into a new state, the outlet would always be overridden anyway.

[rlivsey]

I have an outlet in my main layout for a top level toolbar which certain sections can populate. Not all sections have a toolbar so I can't guarantee that switching sections will clear it out. Its position in the HTML means I can't populate it in a sub-template.

As @wagenet suggests, clearing them in the exit state works fine:

Ember.Route.extend({
  connectOutlets: (router) ->
    applicationController.connectOutlet({
      outletName: 'appToolbar'
      name: "peopleToolbar"
    })

  exit: (router) ->
    router.setPath("applicationController.appToolbar", null)
    @_super(router)
})

As I'm doing this in a few places, I've wrapped the pattern up into a mixin:

App.SectionWithToolbar = Ember.Mixin.create({
  connectOutlets: (router) ->
    toolbarConfig = jQuery.extend({outletName: 'appToolbar'}, @toolbar())
    applicationController.connectOutlet(toolbarConfig)
    @_super(router)

  exit: (router) ->
    router.setPath("applicationController.appToolbar", null)
    @_super(router)
})

Ember.Route.extend(App.SectionWithToolbar, {
  toolbar: (router) -> { name: "peopleToolbar" }
})

Using router.setPath("applicationController.appToolbar", null) feels slightly wrong, but does the job. Maybe a disconnectOutlet method on Controller would be useful but I'd agree with @wagenet that it should be uncommon.

[wagenet]

I'm going to close this since I think there's already a solution in place for the rare situation where it's necessary. That said, if someone has a way to make this even smoother, I'm open to a PR for further discussion.

[pixelcort]

@wagenet wait what about the case I described earlier, with the jsfiddle? You replied saying not to set a blank controller and view, but did not say what to do instead. This is for the case of a list of posts alongside a specific post. What's the right way of doing a master detail view like this where the route can have it where a specific outlet would need to be blank?

[pixelcort]

@wagenet specifically this index leaf state where no specific post is selected.

[wagenet]

@pixelcort IMO, having an unpopulated outlet is bad design. However, if you really feel the need to do that, I would set the outlet property (default is view) on the controller to null.

[rlivsey]

@pixelcort in your fiddle you have a couple of options I can see:

1 - disconnect the outlet in exit of show by router.get('postsController').set('post', null)
2 - add an outlet in index for your blank state - IE there's an empty part of the page, could that contain a message to select a post or something?

@wagenet think it's worth a PR with a Controller#disconnectOutlet which just sets the outlet to null? I can see it being a fairly common thing to need in situations like @pixelcort's where you have nested outlets and the index doesn't have anything pre-selected. Setting the outlets property to null feels like working outside the outlets interface.

[pixelcort]

@rlivsey yeah I think I'll just make an index view that says "please select something" in its template. I can see why having an empty outlet would be undesirable now. Thanks for the advice.

[hnan]

@rlivsey Settting the outlet to null didn't work, at least not for me. The way I managed to make it work is by calling destroy on the outlet/view, like

router.applicationController.get('master').destroy();

[tchak]

A possible solution is in #1139