Confirmation dialog in EmberJs

I am fairly new to EmberJs and I needed to create a nice confirmation dialog when user clicks a delete button. I’ve came up with following solution. Use it or copy it as you wish (please let me know in comments) or propose me a better solution if you know one, I will be glad to improve 🙂

Scenario

We have a list of items displayed in a table. Each item has a name, ID and a delete button. When user clicks it, confirmation dialog should appear.

Solution

For modal dialog we will use Ember Modal component. It will be wrapped inside {{#if}} helper, like this

{{#if hasItemToDelete}}
    {{#modal-dialog close=(action 'closeConfirmationDialog') translucentOverlay=true}}
        <h2 class="ui header">{{t "confirmation.are-you-sure-to-delete-name-placeholder" name=itemToDelete.name}}</h2>
        
        <div class="ui divider"></div>
        <button type="button" {{action "doRemoveItem"}} class="ui button primary">{{t "delete"}}</button>
        <button type="button" {{action "closeConfirmationDialog"}} class="ui button right floated">{{t "cancel"}}</button>
        
    {{/modal-dialog}}
{{/if}}

The result should look like this

 

You may notice that the {{modal-dialog}} block is wrapped in {{#if hasItemToDelete}}. When user clicks a delete button, the clicked item is stored in variable itemToDelete. Then I have a computed property hasItemToDelete which is true when itemToDelete is not null. Like this:

import Ember from 'ember';
const {computed} = Ember;

export default Ember.Component.extend({
    i18n: Ember.inject.service(),
    
    itemToDelete: null,
    
    hasItemToDelete: 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(item) {
          this.set('itemToDelete', item);
      },
      
      /**
       * DO NOT CALL THIS METHOD DIRECTLY
       * BUT ALWAYS VIA CONFIRMATION DIALOG
       */
      doRemoveItem() {
          const itemToDelete = this.get('itemToDelete');
          
          if (!itemToDelete){
              return;
          }
          
          // normally you would call something like itemToDelete.destroyRecord()
          // but this just a simplified example ....
          // so ... you know what to do :)
      },
     }
}

Working example

Unfortunately Twiddle does not let me use {{modal-dialog}} helper, even when it is in the dependencies, so I had to omit it.