How can I empty a named outlet in Ember?

1
votes

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?

2
ember.jsmodal-dialogember-routeroutlet
Have come across one solution, which is to create an 'empty' template and render that into the modal outlet on all non-modal routes. This seems to work, but feels like a real hack. Also would involve 'emptying' the modal outlet for all non-modal routes. (And there are a lot of them.) – doublea
I suppose it's a workabout solution, but is there a clean way to make inserting the 'empty' template the default behavior for all non-modal routes? – doublea
looks like there's an open issue for 'clearing' outlets: github.com/emberjs/ember.js/issues/2002 – doublea
I see, I guess since the issue is labeled as an improvement you better stick to your actual solution... Sorry I couldn't help :/ – intuitivepixel

2 Answers

1
votes

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.

0
votes

I'm using a variation of the following code to clear my modal outlet:

clearOutlet: function (container, outlet) {
    var parentView = this.router._lookupActiveView(container);
    parentView.disconnectOutlet(outlet);
  }

see the full code from @teddyzeeny over at the Ember Discussion Board, here: http://discuss.emberjs.com/t/modal-views-can-we-agree-on-a-best-practice/707/2