Routing a modal on top of any route

Question

I'm currently trying to implement a requirement for a routable modal in my ember app. The goal is to have a tabbed modal overlay where each tab has it's own URL (e.g., /settings, /settings/profile, or /settings/billing) but still displayed over whatever route is currently in the background.

A live example might be twitter.com's direct messages modal, but having it so that opening the modal (and clicking links inside the modal) update the app's URL.

The main wall I've hit in trying to implement this is that my outlets get disconnected upon exit of the 'top' route. I've had some initial success with overriding Route#teardownViews but I'm worried about other side-effects.

EDIT: For clarity, I do render the modal in a separate outlet:

SettingsRoute = Ember.Route.extend

  renderTemplate: ->
    @render
      into: 'application'
      outlet: 'modal'

Might there be a better approach overall to take here?

Answer 1

This seems to work conceptually (I only tear down the 'main' route's views if I'm not transitioning to a messages or settings route (which I have defined as 'modal' routes)):

Ember.Route.reopen

  teardownViews: ->
    @_super() unless @controllerFor('application').get('currentTransition.targetName') == 'messages.index'

  actions:
    willTransition: (transition) ->
      controller = @controllerFor('application')

      controller.set('currentTransition', transition)

      transition.then ->
        controller.set('currentTransition', null)
      , ->
        controller.set('currentTransition', null)

Will post back if I make any other progress.