This is a simple modal dialog component for Ember.js. Modals are created without a state change.
This has been tested with Ember.js v. 1.0.0-rc.3
-
Wrap the handlebar template that you want to be the modal's content with the view helper:
{{#view App.ModalView}} <h1>Hello!!!11!!!</h1> {{#/view}}
-
Add an action to whatever element you want to open the modal dialog:
<a {{action 'showSaveDialog'}} >Save me!!!</a>
-
Add an event handler on your application route to create and append the dialog:
App.ApplicationRoute = Ember.Route.extend({ events: { showSaveDialog: function () { // assuming your view is call SaveDialogView and your template is called save_dialog var dialog = this.container.lookup('view:save_dialog'); dialog.append(); } } });
chenzihui for the inspiration
stefanpenner for the guidance on new Ember.js patterns