Confirmation-Dialog-3

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle',
  
  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'}
    ],
  
    itemToDelete: null,
    
    hasItemToDelete: Ember.computed('itemToDelete', function(){
       return this.get('itemToDelete') != null; 
    }),
    
    _closeConfirmationDialog: function() {
      this.set('itemToDelete', null);
    },
  
  	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.get('items').removeObject(itemToDelete);
        
          this._closeConfirmationDialog();
      },
      
      closeConfirmationDialog: function() {
        this._closeConfirmationDialog();
      }
     }
});

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 hasItemToDelete}}
 {{! unfortunately I can not use modal-dialog helper in Twiddle }}
        <h2 class="ui header">Are you sure you want to delete item?</h2>
        
        <div class="ui divider"></div>
        <button type="button" {{action "doRemoveItem"}} class="ui button primary">Delete</button>
        <button type="button" {{action "closeConfirmationDialog"}} class="ui button right floated">Cancel</button>
{{/if}}

<br>
<br>
{{outlet}}
<br>
<br>

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",
    "ember": "2.6.0",
    "ember-data": "2.6.0",
    "ember-template-compiler": "2.6.0",
    "ember-modal-dialog": "0.8.3"
  }
}