javascript - 我应该如何在打开 SimpleModal 对话框的 BackBone.js View 中取消绑定(bind)事件？

Question

每次创建 View 并打开对话框时，我都会得到 n 组事件，其中 n 是打开对话框的次数。在下面的示例中，每次单击 fooButton 时，我都会获得 n 按钮单击事件。我知道我应该取消绑定(bind)事件，但 this.undelegateEvents() 不工作。

根据我对 SimpleDialog(和其他对话框小部件的工作方式)的理解，div 的内容在创建对话框时被复制到另一个元素中，这表明我应该能够捕获创建的元素(比如 $dialog = this.$el.modal(); ) 然后调用 undelegateEvents 。这种方法也行不通。

有什么想法吗？

MyDialogView = Backbone.View.extend({
    initialize: function(options){
        this.render();
    },
    render: function() {

        this.$el.empty().append("<button id='fooButton'>Foo</button>");

        this.$el.modal({ "static": true });
    },
    events: {
        "click #fooButton": "fooPressed"
    },
    fooPressed: function() {
        alert("clicked");

        $.modal.close();
    }
});

$(function(){
    $("#openDialog").click(function() {
        new MyDialogView({el: $("#dialog") });
    });
});

感谢您的帮助!

通过切换到 JQuery UI 对话框解决。请参阅下面我的回答。

Answer 1

每次实例化 View 时，Backbone 都会调用 delegateEvents在你的 el 上:

delegateEvents delegateEvents([events])

[...] By default, delegateEvents is called within the View's constructor for you, [...]

所以每次你这样做:

new MyDialogView({el: $("#dialog") });

您正在附加一个 jQuery delegate到#dialog。你的问题是你没有自己清理，你应该在关闭对话框时删除 delegate。

你应该调用 undelegateEvents当您关闭对话框时:

fooPressed: function() {
    alert("clicked");
    this.undelegateEvents();
    $.modal.close();
}

或者，您可以创建一次 View ，然后调用一些方法根据需要将其弹出。通过您的设置，您可以从 initialize 中删除 render 调用，所有 new MyDialogView(...) 只需一次并保存 View 在一个变量中，然后根据需要 my_dialog_view.render()。