Search code examples
ember.jsmodal-dialogember-routeroutlet

How can I empty a named outlet in Ember?


I've got a named outlet in my application template, which I'm using for modal (popup) views only. By default I want this to be an empty, unused outlet, as only about 5% of my routes will involve a modal display. For those particular modal routes, I'm inserting the modal template from the deeply nested child route, e.g.

App.NeeplyNestedModalChildRoute = Ember.Route.extend({
  renderTemplate: function() {        
    this.render({
      into: 'application',
      outlet: 'modal'
    });
  }
});

The issue I'm having is that I want 'closing the modal box' to involve transitioning to a different, non-modal, less deeply nested route. I'm successfully transitioning to the correct route, but I can't figure out how to clear the modal outlet. How can I force the modal outlet to clear for all the non-modal routes?



Solution

  • I commented on this use case on issue @intuitive pixel was talking about. It seems there is already functionality for what you're trying to do, at least in part. You can use the deactivate hook when leaving a route. In that you can clear out the outlet, I would think.

    Perhaps you could create an empty template that you render into the outlet. Then when the deactivate hook is called, simply render the empty template into the outlet. That should work for now until they close the issue.