Confirmation-Dialog

controllers.application.js

import Ember from 'ember';

export default Ember.Component.extend({    
    itemToDelete: null,
    
    hasItemToDelete: Ember.computed('itemToDelete', function(){
       return this.get('itemToDelete') != null; 
    }),
    
    _closeConfirmationDialog: function() {
      this.set('itemToDelete', null);
    },
    
    items: [
      {id: 1, name: 'first item'},
      {id: 2, name: 'second item'},
      {id: 3, name: 'third item'},
      {id: 4, name: 'fourth item'},
      {id: 5, name: 'fifth item'}
    ],

    actions: {
      removeItem: function(item) {
          this.set('itemToDelete', item);
      },
      
      /**
       * DO NOT CALL THIS METHOD DIRECTLY
       * BUT ALWAYS VIA CONFIRMATION DIALOG
       */
      doRemoveItem: function() {
          const itemToDelete = this.get('itemToDelete');
          
          if (!itemToDelete){
              return;
          }
          
          // normally you would call something like itemToDelete.destroyRecord()
          // but this just a simplified example ....
          this
      },
     }
});

templates.application.hbs

<h1>Example of using confirmation dialog</h1>

{{#each items as |item|}}
 <div>
  {{item.name}} <button {{action 'removeItem' item}}>Remove</button>
 </div>
{{/each}}

{{#if hasClusterToDelete}}
    {{#modal-dialog close=(action 'closeConfirmationDialog') translucentOverlay=true}}
        <h2 class="ui header">Are you sure you want to delete item?</h2>
        
        <div class="ui divider"></div>
        <button type="button" {{action "doRemoveCluster"}} class="ui button primary">Delete</button>
        <button type="button" {{action "closeConfirmationDialog"}} class="ui button right floated">Cancel</button>
        
    {{/modal-dialog}}
{{/if}}

twiddle.json

{
  "version": "0.9.2",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "underscore": "https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js",
    "ember": "2.5.1",
    "ember-data": "2.6.0",
    "ember-template-compiler": "2.5.1",
    "ember-modal-dialog": "0.8.3"
  }
}