Backbone.js事件绑定。类似于Jquery中的“delegate”吗？

Question

我是一个backbone.js的新手。我发现在Backbone.js中，事件绑定：

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

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

不需要在调用时存在button.btnSay按钮，这很类似于Jquery中的“委托”。

现在的问题是，我们可以通过Firebug等工具将html页面中的任何按钮更改为.btnSay。最终它们会得到监听器。我们如何防止这种情况发生？

- phnah

Answer 1

Backbone在底层使用jQuery的"delegate"来连接事件，所以这不是"类似于"jQuery，而是jQuery帮助我们完成了这个过程。

为了避免作用域问题并确保我们的视图事件仅与我们想要的HTML/DOM元素一起工作，所有events声明都限定在View的el范围内。

当实例化Backbone视图时，el属性将被自动生成或由您分配。这使您有机会将您的视图附加到现有的DOM块或创建一个可以附加到DOM的新HTML块。

以下是如何连接到现有DOM：

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

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

By specifying the el when we instantiate the view, or by specifying it directly in our view definition, we use an existing element.

If we omit the el from the constructor options and from the view definition, Backbone will generate an el for us. By default it will generate a div in el when the view is instantiated.

Once a View has it's el, whether through generation or assignment, the view's event declarations are delegated via jQuery, scoped to the view's el.

let's say you have the following html:

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

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

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

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

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

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

- Derick Bailey

---

你太棒了！:)...我希望我能选择你们两个作为我的答案。 - phnah

谢谢！@mu的回答也非常好。我喜欢他指出了在服务器端保护自己的重要性。... 但是如果您对我的回答点个赞就更好了 :) - Derick Bailey

Answer 2

它并不类似于delegate，但是它确实使用delegate（除非事件没有选择器）。在Backbone中，事件绑定看起来像这样：

if (selector === '') {
  $(this.el).bind(eventName, method);
} else {
  $(this.el).delegate(selector, eventName, method);
}

因此，它在视图元素上使用 delegate 。这至少将事件限制在视图内的元素中。

你无法阻止人们在调试器中搞乱你的元素和事件。他们可以更改HTML、CSS，甚至编辑你的JavaScript，因此你不能阻止他们在你的页面上引起麻烦。但你可以防止他们在你的服务器上惹出麻烦，只需不信任Backbone发送到服务器的任何内容，并像验证来自外部世界的任何其他内容一样验证所有内容。

基本上，不要浪费时间担心别人通过操纵你的HTML/events/JavaScript自残。让他们随心所欲地受伤。但是通过不信任来自外部世界的任何内容来保护你的服务器(你的服务器也不应该比必须做的更信任自己)。

- mu is too short

---

非常感谢：）你刚刚唤醒了我。我太关注HTML /事件/JavaScript了。 - phnah