EmberJS Modal View with Bootstrap

Transcript

1. EmberJS Modal View with Bootstrap Brad Fol bradfol@gmail.com Hello :) my name is Brad
2. Design Intent • More intelligent action helper • Confirmation • Yes or no answer • Delegate to the controller What did we need out of a modal view? What does it do? Example: cancel edits being made to a model
3. Components • View template • View logic • Helper usage 3 pieces I will cover
4. <button {{action "modalAction" target="view"}} class="btn">Cancel</button> <div class="modal hide fade"> <div class="modal-header"> <button class="close" data-dismiss="modal" aria-hidden="true">&times;</button> <h3>Are you sure?</h3> </div> <div class="modal-body"> <p>There are changes that have not been saved.</p> </div> <div class="modal-footer"> <a {{action "falseAnswer" target="view"}} class="btn">Keep changes</a> <a {{action "trueAnswer" target="view"}} class="btn-primary">Discard changes</a> </div> </div> what the user sees on the page modalAction is the entry point target=view
5. <button {{action "modalAction" target="view"}} class="btn">Cancel</button> <div class="modal hide fade"> <div class="modal-header"> <button class="close" data-dismiss="modal" aria-hidden="true">&times;</button> <h3>Are you sure?</h3> </div> <div class="modal-body"> <p>There are changes that have not been saved.</p> </div> <div class="modal-footer"> <a {{action "falseAnswer" target="view"}} class="btn">Keep changes</a> <a {{action "trueAnswer" target="view"}} class="btn-primary">Discard changes</a> </div> </div> Using Bootstrap’s markup for modal Hidden by default Prompts user to continue with this action 3 actions to handle in the view logic
6. <button {{action "modalAction" target="view"}} class="btn">Cancel</button> <div class="modal hide fade"> <div class="modal-header"> <button class="close" data-dismiss="modal" aria-hidden="true">&times;</button> <h3>Are you sure?</h3> </div> <div class="modal-body"> <p>There are changes that have not been saved.</p> </div> <div class="modal-footer"> <a {{action "falseAnswer" target="view"}} class="btn">Keep changes</a> <a {{action "trueAnswer" target="view"}} class="btn-primary">Discard changes</a> </div> </div> Using Bootstrap’s markup for modal Hidden by default Prompts user to continue with this action 3 actions to handle in the view logic
7. App.ModalView = Ember.View.extend(Ember.ViewTargetActionSupport, { templateName: 'modalCancel', confirm: true, modalAction: function(){ if(this.get('confirm')){ this.$('.modal').modal(); } else { this.triggerAction(); } }, answer: false, trueAnswer: function(){ this.set('answer', true); this.$('.modal').modal('hide'); }, falseAnswer: function(){ this.set('answer', false); this.$('.modal').modal('hide'); }, eventManager: { hidden: function (event, view) { if (view.get('answer')) { view.set('answer', false); view.triggerAction(); } } } modalAction: confirm by default, can bind to this on controller for example, isDirty this.$() selects within scope of the view ViewTargetActionSupport trigger action works just like the action helper
8. App.ModalView = Ember.View.extend(Ember.ViewTargetActionSupport, { templateName: 'modalCancel', confirm: true, modalAction: function(){ if(this.get('confirm')){ this.$('.modal').modal(); } else { this.triggerAction(); } }, answer: false, trueAnswer: function(){ this.set('answer', true); this.$('.modal').modal('hide'); }, falseAnswer: function(){ this.set('answer', false); this.$('.modal').modal('hide'); }, eventManager: { hidden: function (event, view) { if (view.get('answer')) { view.set('answer', false); view.triggerAction(); } } } }); App = Ember.Application.create({ customEvents: { 'hidden': 'hidden' } }); Ember.Handlebars.helper('modal', App.ModalView); Answer is false by default Modal can be dismissed by clicking away Hide the modal, don’t trigger action yet
9. answer: false, trueAnswer: function(){ this.set('answer', true); this.$('.modal').modal('hide'); }, falseAnswer: function(){ this.set('answer', false); this.$('.modal').modal('hide'); }, eventManager: { hidden: function (event, view) { if (view.get('answer')) { view.set('answer', false); view.triggerAction(); } } } }); App = Ember.Application.create({ customEvents: { 'hidden': 'hidden' } }); Ember.Handlebars.helper('modal', App.ModalView); Bootstrap fires the `hidden` event when the modal animation is complete eventManager to register for DOM events no bind on or off. Handles event delegation for you injects the Ember view
10. }, eventManager: { hidden: function (event, view) { if (view.get('answer')) { view.set('answer', false); view.triggerAction(); } } } }); App = Ember.Application.create({ customEvents: { 'hidden': 'hidden' } }); Ember.Handlebars.helper('modal', App.ModalView); Create your own handlebars helper out of a view Can pass in the view class directly But first let’s see what it would look like with the view helper
11. {{view "App.ModalView" action="cancelEdit" confirmBinding="isDirty"}} {{modal action="cancelEdit" confirm=isDirty}} Using the view helper modal helper removes clutter provides nice binding sugar
12. {{view "App.ModalView" action="cancelEdit" confirmBinding="isDirty"}} {{modal action="cancelEdit" confirm=isDirty}} Using the view helper modal helper removes clutter provides nice binding sugar
13. {{modal action="cancelEdit" confirm=isDirty}} So here is the final product: very similar to an action helper, but confirms with the user first if necessary An example for delete: always confirm use different template w/ red button etc
14. {{modal action="cancelEdit" confirm=isDirty}} {{modal action="delete" templateName="modalDelete"}} So here is the final product: very similar to an action helper, but confirms with the user first if necessary An example for delete: always confirm use different template w/ red button etc
15. Thank You it is a nice pattern that has worked well for us hope that it will be useful to you as well Thank you :)