javascript - 如何在我的 ember View 中绑定(bind)到 bootstrap 的模态事件？

Question

我正在使用 ember View 来呈现我的应用程序的模态介绍，目前它看起来像这样:

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();
    }
});

modal.hbs 模板只是一些样板 html。

当我触发我的 showModal 函数时，我可以很好地显示模态，但是在模态关闭后我无法从 DOM 中删除 View ，我试图绑定(bind)到隐藏 事件，但我无法弄清楚如何，任何人都可以指出我正确的方向吗？

Answer 1

我已经在现有的应用程序中使用了这种方法，并且效果很好

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();
    }
});

这里我们监听 hidden 事件，当模式完全隐藏时触发，以销毁对象。这一点很重要，因为通过调用 view.append() 以编程方式创建的 View 不会被销毁。这种方法确保了这一点。

这是 jsfiddle举例说明。