How to simply wrap a bootstrap 2 modal dialog in an ember component?

Question

There is an official cookbook for using a dialog with ember that uses a component : http://emberjs.com/guides/cookbook/user_interface_and_interaction/using_modal_dialogs/

What I'd like to do is to use a twitter bootstrap 2 dialog instead.

It does work, except for the closeModal action.

I need to register a callback to the bootstrap event "hidden" that calls the close action, but my attempts were not successful.

App.ModalDialogComponent = Ember.Component.extend({
    didInsertElement: function () {
        this.$('.modal').modal('show');
        this.$('.modal').on("hidden", function () {
            // how to trigger the close action from here ?
        });
    },
    actions: {
        close: function () {
            return this.sendAction();
        }
    }
});

Here is a full jsFiddle: http://jsfiddle.net/NQKvy/417/

Answer 1

The close action wasn't necessary at all.

Here is a working jsFiddle where I kept only the necessary parts and added willDestroyElement to the component: http://jsfiddle.net/NQKvy/421/

App.ModalDialogComponent = Ember.Component.extend({
    didInsertElement: function () {
        var self = this;
        this.$('.modal').modal('show');
        this.$('.modal').on("hidden", function () {
            self.sendAction();
        });
    }
});

Answer 2

do following

App.ModalDialogComponent = Ember.Component.extend({
    didInsertElement: function () {
        self=this
        this.$('.modal').modal('show');
        this.$('.modal').on("hidden", function () {
            self.send('close')
        });
    },
    actions: {
        close: function () {
            return this.sendAction();
        }
    }
});