Draft for semantic ui's modals integration in Ember

my-modal.js

import Ember from 'ember';

export default Ember.Component.extend({
    classNames: ['ui', 'modal'],

    didInsertElement () {
        let _this = this;
        this.$().modal({
            // When the modal is hidden, we send an action and update its state
            onHide: function () {
                // This function can be triggered by:
                //  - semantic ui (when clicking outside modal for example). In this case, we update isModalVisible to keep
                // the property synchronized
                //  - because isModalVisible changed (the action show observes this variable), in this case if we update
                // the property, we will enter an infinite loop, this is why we use Ember.run.once()
                Ember.run.once(_this, function () {
                    _this.set('isModalVisible', false);
                });
                _this.sendAction('onClose');
            },
            // We send an action when the user approves the content of the model
            onApprove: function () {
                _this.sendAction('onApprove');
            },
            // We close the modal is the user do not book any slot
            onDeny: function () {
                _this.set('isModalVisible', false);
                _this.sendAction('onClose');
            }
        });
    },

    // Show or hide the modal based on isModalVisible property.
    isModalVisibleChanged: Ember.observer('isModalVisible', function () {
        // This function can be triggered before the element has been inserted (so before this.$() is defined)
        // this is why we check if the variable if defined
        if (this.$() === undefined) { return; }
        // Show the modal when isModalVisible turns to true
        if (this.get('isModalVisible') === true) { this.$().modal('show'); }
        // Hide the model when isModalVisible turns to false
        else { this.$().modal('hide'); }
    })
});