javascript - Backbone.js View 无法正确取消绑定(bind)事件

Question

我有一些将点击事件绑定(bind)到按钮的 Backbone.js 代码，点击后想解绑，代码示例如下:

var AppView = Backbone.View.extend({
    el:$("#app-view"),
    initialize:function(){
        _.bindAll(this,"cancel");
    },

    events:{
        "click .button":"cancel"
    },

    cancel:function(){
        console.log("do something...");
        this.$(".button").unbind("click");
    }
});
var view = new AppView();

但是解除绑定(bind)不起作用，我尝试了几种不同的方法并最终在使用 jQuery 的初始化函数中绑定(bind)了事件，但在 Backbone.events 模型中却没有。

有人知道为什么解除绑定(bind)不起作用吗？

Answer 1

它不起作用的原因是 Backbonejs 没有将事件绑定(bind)到 DOM 元素 .button 本身。它像这样委托(delegate)事件:

$(this.el).delegate('.button', 'click', yourCallback);

(文档:http://api.jquery.com/delegate)

您必须像这样取消委托(delegate)该事件:

$(this.el).undelegate('.button', 'click');

(文档:http://api.jquery.com/undelegate)

所以你的代码应该是这样的:

var AppView = Backbone.View.extend({
    el:$("#app-view"),
    initialize:function(){
        _.bindAll(this,"cancel");
    },

    events:{
        "click .button":"cancel"
    },

    cancel:function(){
        console.log("do something...");
        $(this.el).undelegate('.button', 'click');
    }
});
var view = new AppView();

解决这个问题的另一种(也许更好)方法是创建一个像 this.isCancelable 这样的状态属性，现在每次调用 cancel 函数时，你都检查 this .isCancelable 设置为 true，如果是，则继续您的操作并将 this.isCancelable 设置为 false。

另一个按钮可以通过将 this.isCancelable 设置为 true 来重新激活取消按钮，而无需绑定(bind)/取消绑定(bind)点击事件。