Using Modal Dialogs Edit Page
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:
In your application route:
1 2 3 4 5 6 7 8 9 10 |
App.ApplicationRoute = 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.
1 2 3 4 5 6 |
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.
Example
This example shows:
- Rendering a pop-up modal in a named outlet.
- Sending a specific model to the modal controller.
- Wrapping the common modal markup and actions in a component.
- Handling events to close the modal when the overlay is clicked.