How do I bind to bootstrap's modal events in my ember view?

Question

I'm using an ember view to render a modal intro my app, currently it looks like this:

views/modal.js

App.ModalView = Ember.View.extend({
    tagName: 'div',
    classNames: ['modal', 'fade'],
    templateName: 'modal',
    didInsertElement: function() {
        this.$().modal('show');
    }
});

controller/application.js

App.ApplicationController = Ember.ArrayController.extend({
    showModal: function() {
        var modal = App.ModalView.create();
        modal.append();
    }
});

The modal.hbs template is just some boilerplate html.

I can show the modal just fine when I trigger my showModal function but I haven't been able to remove the view from the DOM after the modal closes, I'm trying to bind to the hidden event but I can't figure out how, can anyone point me in the right direction?

Answer 1

I have used this approach in an existing app, and works well

App.ModalView = Ember.View.extend({
    templateName: "modal",
    title: "",
    content: "",
    classNames: ["modal", "fade", "hide"],
    didInsertElement: function() {
        this.$().modal("show");
        this.$().one("hidden", this._viewDidHide);
    },
    // modal dismissed by example clicked in X, make sure the modal view is destroyed
    _viewDidHide: function() {
        if (!this.isDestroyed) {
            this.destroy();
        }
    },
    // here we click in close button so _viewDidHide is called
    close: function() {        
        this.$(".close").click();
    }
});

Here we listen the hidden event, that is triggered when the modal is completely hidden, to destroy the object. This is important because views created programmatically, calling view.append(), isn't destroyed. That approach ensure it.

And this is the jsfiddle with the example.