javascript - 在 Backbone.js View 中禁用特定事件

Question

我正在处理嵌套主干 View ，如果您在其中单击，它将创建同一 View 的新实例。我只想禁用一个特定事件，而不是所有事件；在这种情况下，点击。我尝试使用 undelegateEvents()，但这会禁用所有功能。关于如何做到这一点有什么想法吗？

这是我正在处理的一段代码:

var View = Backbone.View.extend({
    events: {
        "mousedown": "start",
        "mouseup": "over"
    },

    start: function() {
        var model = this.model;

        var v = new View({
            model: model,
        });
        v.undelegateEvents(); //I just want to disable mousedown
        v.render();
    },

    over: function() {
        /*
        some code here
        */
    },

    render: function() {
        /*
        some code here
        */
    }
});

想法是在保留其他事件的同时禁止点击第二个实例化 View 。第一个将有它的所有事件。

谢谢

Answer 1

您可以指定在调用 delegateEvents 时要使用的事件:

delegateEvents delegateEvents([events])

Uses jQuery's delegate function to provide declarative callbacks for DOM events within a view. If an events hash is not passed directly, uses this.events as the source.

所以你可以这样做:

var v = new View({
    model: model,
});
v.undelegateEvents();
var e = _.clone(v.events);
delete e.mousedown;
v.delegateEvents(e);
v.render();

尽管如此，您可能希望将该逻辑推送到 View 的方法中:

detach_mousedown: function() {
    this.undelegateEvents();
    this.events = _.clone(this.events);
    delete this.events.mousedown;
    this.delegateEvents();
}

//...

v.detach_mousedown();

您需要 this.events = _.clone(this.events) 技巧来避免意外更改“类”的 events(即 this.constructor.prototype。事件)当你只想为一个对象改变它时。您还可以为 View 构造函数设置一个标志，该构造函数会在其 initialize 中执行类似的操作:

initialize: function() {
    if(this.options.no_mousedown)
        this.detach_mousedown()
    //...
}

另一种选择是拥有一个没有 mousedown 处理程序的基本 View ，然后将其扩展到具有 mousedown 处理程序的 View :

var B = Backbone.View.extend({
    events: {
        "mouseup": "over"
    },
    //...
});
var V = B.extend({
    events: {
        "mousedown": "start",
        "mouseup": "over"
    },
    start: function() { /* ... */ }
    //...
});

您必须在 V 中复制 B.events 或在 events< 上使用手动 extend 来搞乱作为_.extend不会合并属性，它只是替换大量的东西。