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

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

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

---

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

是，这是预期的。主干用于事件绑定。这意味着，事件实际上绑定到视图的EL，而不是直接绑定到子节点

---

当你说“同一个元素”时，你是说DOM中完全相同的节点吗？或者，您是指具有相同选择器的节点吗？我想我不太清楚

我可以问一下为什么要将两个视图绑定到同一个元素吗

在我看来，您应该只有一个表示元素本身的视图 事件与元素的绑定只应在该视图中定义

将单击事件绑定到不属于视图的元素时，会遇到问题

如果通过散列绑定，这些事件将包含在视图的

el

中。 但是，如果您自己定义了click，那么代码的可管理性就会降低

因此，请继续了解您可以做什么：

您可以定义一个视图，按住按钮并在单击按钮时触发事件，而当按下按钮时需要处理一些代码的其他视图不直接绑定到按钮单击本身，它们可以侦听引发的事件

JSFIDLE上的示例：

代码中的要点如下：

// 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);
    }
});

//要触发并绑定到的事件聚合器对象
var events=551;.extend（{}，主干.events），
//通过事件聚合器彼此对话的两个视图
var myButtonView=Backbone.View.extend({
//第一个视图将单击事件绑定到按钮
活动：{
“单击a”：“myClickEvent”
},
初始化：函数（）{
_.bindAll（本“呈现”）；
这个。render（）；
},
render:function（）{
归还这个；
},
//click event执行此函数，该函数在events对象上触发自定义事件。
myClickEvent:函数（e）{
$（e.target）.blur（）；
触发器（“侧栏：myCustomClickEvent”）；
返回false；
}
});
var myPanelView=Backbone.View.extend({
//第二个视图绑定到该事件，并执行自定义单击处理程序
初始化：函数（）{
_.bindAll（这是“呈现”、“myClickEventHandler”）；
bind（“侧栏：myCustomClickEvent”，this.myClickEventHandler）；
这个。render（）；
},
render:function（）{
归还这个；
},
//当引发事件时，单击处理程序执行一些逻辑（追加div）。
myClickEventHandler:函数（）{
var txt=$（''）.text（“您刚刚单击了按钮。（在其他视图中绑定）”；
$（this.el）.append（txt）；
}
});