在Backbone.js视图中禁用特定事件

Question

我正在研究嵌套的主干视图,如果单击它,它将创建同一视图的新实例.我想只禁用特定事件,而不是所有事件; 在这种情况下,点击.我尝试使用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
        */
    }
});

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

谢谢

Answer 1

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

delegateEvents delegateEvents([events])

使用jQuery的delegate函数为视图中的DOM事件提供声明性回调.如果未直接传递事件哈希,则将其this.events用作源.

所以你可以这样做:

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.events).你也可以在View构造函数中有一个标志,它可以在其中执行类似的操作initialize:

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

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

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

你必须复制B.events内部V或乱七八糟的手册extend,events因为_.extend不会合并属性,它只是替换批发的东西.