jquery - Backbone.js 事件绑定(bind)。就像 Jquery 中的 "delegate"一样？

Question

我是backbone.js 的新手。我在 Backbone.js 中看到事件绑定(bind):

var PersonView = Backbone.View.extend({
    ....
    events : {
        "click button.btnSay" : "saySomething"
    },

    saySomething : function(){
        ....
    }
    ...
});

...不需要button.btnSay在调用时存在，这与Jquery中的“委托(delegate)”非常相似。

现在的问题是，我们可以将 html 页面中的任何 按钮 更改为 .btnSay (通过 Firebug 等)。他们最终得到了听众。我们怎样才能防止这种情况发生？

Answer 1

在底层，Backbone 使用 jQuery 的“委托(delegate)”来连接事件。所以这并不是说这“像”jQuery，而是 jQuery 为我们做的。

为了防止作用域问题并确保我们的 View 事件仅适用于我们想要的 HTML/DOM 元素，所有 events 声明的作用域都是 View 的 el。

实例化 Backbone View 时，会为您生成或由您分配一个 el 属性。这使您有机会将 View 附加到现有的 DOM block ，或者创建可附加到 DOM 的新 HTML block 。

以下是附加到现有 DOM 的方法:

MyView = Backbone.View.extend({
  // ...
});<p></p>

<p>var existingDomEl = $("#someElement");
new MyView({
  el: existingDomEl
});
</p>

通过在实例化 View 时指定el，或者直接在 View 定义中指定它，我们可以使用现有元素。

如果我们从构造函数选项和 View 定义中省略el，Backbone将为我们生成一个el。默认情况下，当 View 实例化时，它会在 el 中生成一个 div。

一旦 View 拥有了它的 el，无论是通过生成还是赋值， View 的事件声明都会通过 jQuery 进行委托(delegate)，范围限定为 View 的 el。

假设您有以下 html:

<div id="foo">
  <button class="btnSay">Say!</button>
</div>
<div id="bare">
  <button class="btnSay">Say, Part 2!</button>
</div>

使用您的示例 View ，我们可以将 View 分配给 foo 或 bar 元素，并且只有该元素内的按钮才会获得单击事件。

var PersonView = Backbone.View.extend({
    ....
    events : {
        "click button.btnSay" : "saySomething"
    },

    saySomething : function(){
        ....
    }
    ...
});

new PersonView({
  el: $("#foo")
});

现在，当您单击 foo div 中的按钮时，您将触发 saySomething 回调。但由于 PersonView 的事件范围在该 PersonView 实例的 el 内，因此单击 bar 内的按钮永远不会触发回调。