Problem
You want to show part of your UI in a modal dialog.
Solution
Render a specific controller into a named modal
outlet in your application
template.
Discussion
You can use a route's render
method to render a specific controller and
template into a named outlet. In this case we can setup our application template
to handle the main outlet and a modal outlet:
Then you can render a controller and template into the modal
outlet. Sending
an action in a template will propagate to the application route's actions.
In a template:
<button >Open modal</button>
In your application route:
export default Ember.Route.extend({
actions: {
openModal: function(modalName) {
return this.render(modalName, {
into: 'application',
outlet: 'modal'
});
}
}
});
When closing a modal, you can use the route's disconnectOutlet
method to remove
the modal from the DOM.
closeModal: function() {
return this.disconnectOutlet({
outlet: 'modal',
parentView: 'application'
});
}
It may also be helpful to use a modal-dialog
component to handle common markup
and interactions such as rendering an overlay and handling clicks outside of the
modal.