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

Question

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

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

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

Answer 1

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

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

Answer 2

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

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

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

如果您通过 delegateEvents 哈希，这些事件包含在视图的 el 中。
然而，如果您自己定义点击，您的代码将变得更难以管理。

因此，关于您可以做什么：

事件！

您可以定义 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);
    }
});