Backbone.js事件绑定.就像Jquery中的"委托"一样？

Question

我是backbone.js的新手.我在Backbone.js中看到,事件绑定:

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

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

...不需要button.btnSay在调用时存在,这与Jquery中的"委托"非常相似.

现在,问题是,我们可以将html页面中的任何按钮更改为.btnSay(由Firebug等).他们最终会得到听众.我们怎么能阻止这个？

Answer 1

Backbone使用jQuery的"委托"来连接事件.所以这不是"喜欢"jQuery,它是jQuery为我们做的.

为了防止作用域问题并确保我们的View事件仅使用我们想要的HTML/DOM元素,所有events声明都限定在View的范围内el.

实例化Backbone视图时,el将为您生成或由您分配属性.这使您有机会将视图附加到DOM的现有块或创建可附加到DOM的新的HTML块.

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

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


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

通过指定el实例化视图的时间,或者直接在视图定义中指定它,我们使用现有元素.

如果我们省略el构造函数选项和视图定义,Backbone将为el我们生成一个.默认情况下,它会在el实例化视图时生成div .

一旦View拥有它el,无论是通过生成还是赋值,视图的事件声明都是通过jQuery委托给视图的el.

假设您有以下html:

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

使用您的示例View,我们可以为该元素foo或bar元素分配视图,只有该元素中的按钮才能获得click事件.

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

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

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

现在,当您单击foodiv中的按钮时,您将获得saySomething回调.但是因为PersonView的事件是针对PersonView el实例的,所以单击其中的按钮bar将永远不会触发回调.

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 /事件/ JavaScript,用砖块砸自己的脸.让他们随心所欲地伤害自己.但是,不要相信来自外部世界的任何事情来保护您的服务器(并且您的服务器甚至不应该信任自己,而不是他们不得不相信).