How to create a modal confirmation dialog before delete with ember-cli

Question

I am trying to create a users manager, I can create edit and delete users, In the delete action I want to display a modal confirmation dialog with a "proceed" & "cancel" buttons, to confirm user's suppression.

What are the best practice to do that, I am using ember-cli 0.2.3, There a lot of suggestions in the net, I am a little bit confused with those solutions, what is the standard or the best way to create modals with Ember-CLI ?

Answer 1

YOu should bind your toggleModal function with the delete button and your deleteUser fucntion with the 'ok' button in the modal.

For example:

//button to call modal
<button {{action 'showModal' 'modal-main'}}>Delete User</button>


//ok button on the modal
<button {{action 'deleteAfterConfirm' 'modal-main'}}>Ok</button>

export default Ember.Controller.extend({
    actions: {
        deleteAfterConfirm: function(userId) {
          if (confirm("Want to delete?");) {
             //deleteUser
          }
        },
        showModal: function(targetId) {
            var modal = Ember.Views.views[targetId];
            modal.send('toggleModal');
        }
    }
});

You can see here in detail how to create and style your modal

Answer 2

You can use Bootstrap's modal and bind an action to the 'proceed' button.

Live demo of Bootstrap's modal here.