Question

我正在尝试将两个点击事件绑定到两个不同视图中的单个HTML元素。其中一个视图触发事件，另一个视图不触发。

其中一个视图将body作为 el 属性。如果我将此视图的 el 更改为与其他视图相同的元素，则会触发这两个事件。

这是预期的吗？如何在两个不同的视图中绑定同一元素的点击事件？

Answer 1

是的，这是预料之中的。 Backbone使用jQuery delegates进行事件绑定。这意味着，事件实际上绑定到视图的EL，而不是直接绑定到子节点。

当你说“相同的元素”时，你的意思是字面上是DOM中完全相同的节点吗？或者，您的意思是具有相同选择器的节点？我想我并不完全清楚。

Answer 2

我可以问你为什么要将2个视图绑定到同一个元素？

从我的角度来看，你应该只有一个代表元素本身的视图并且只应在该视图中定义与元素绑定的事件。

将点击事件绑定到不属于视图的元素时，您将遇到麻烦

如果您通过delegateEvents哈希绑定，则这些事件包含在视图的el中。但是，如果您自己定义了点击，那么您的代码将变得不那么可管理。

所以，你可以做什么：

events!

您可以定义1个视图，按住按钮并在单击按钮时触发事件，而按下该按钮时需要处理某些代码的其他视图不会直接绑定到按钮单击本身，他们可以收听对那个引发的事件。

关于jsfiddle的例子： http://jsfiddle.net/saelfaer/Qck5w/2/

代码中的要点：

// an event aggregator object to trigger and bind to
var events = _.extend({}, Backbone.Events),

// two views that talk to each other trough the event aggregator
var myButtonView = Backbone.View.extend({
    // first view binds a click event to the button
    events: {
        "click a" : "myClickEvent"
    },
    initialize: function(){
        _.bindAll(this, "render");
        this.render();
    },
    render: function(){
        return this;
    },
    // click event executes this function, which triggers a custom event on the events object.
    myClickEvent: function(e){
        $(e.target).blur();
        events.trigger("sidebar:myCustomClickEvent");
        return false;
    }
});

var myPanelView = Backbone.View.extend({
    // second view binds to that event, and executes the custom click handler
    initialize: function(){
        _.bindAll(this, "render", "myClickEventHandler");
        events.bind("sidebar:myCustomClickEvent", this.myClickEventHandler);
        this.render();
    },
    render: function(){
        return this;
    },
    // the click handler does some logic (appends div) when the event is raised.
    myClickEventHandler: function(){
        var txt = $('<div/>').text("you just clicked the button. (bound in other view)");
        $(this.el).append(txt);
    }
});

多个视图绑定到backbone.js中的单个元素

2 个答案: