Backbone.js事件绑定。 就像Jquery中的“委托”一样?

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

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

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

现在,问题是,我们可以将html页面中的任何按钮更改为.btnSay (由Firebug等)。 他们最终得到了听众。 我们怎么能防止这种情况?

它与使用delegate不相似(除非事件没有选择器)。 Backbone中的事件绑定如下所示:

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

所以它在视图的元素上使用delegate 。 这至少将事件限制在视图中的元素。

您无法阻止人们在调试器中弄乱您的元素和事件。 他们可以更改HTML,CSS,甚至编辑您的JavaScript,这样您就无法阻止它们在您的页面上造成麻烦。 你可以阻止他们在你的服务器上乱七八糟,只是不要相信Backbone发送到你的服务器的任何东西,并validation一切,就像validation来自外部世界的任何其他东西一样。

基本上,不要浪费你的时间担心有人乱搞你的HTML /事件/ JavaScript,用砖块砸自己的脸。 让他们随心所欲地伤害自己。 但是,不要信任来自外部世界的任何事情来保护您的服务器(并且您的服务器甚至不应该信任自己,而不是他们必须信任)。

在引擎盖下,Backbone使用jQuery的“委托”来连接事件。 所以这不是“喜欢”jQuery,它是jQuery为我们做的。

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

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

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

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

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

var existingDomEl = $(“#someElement”);
新的MyView({
el:existingDomEl
});

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

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

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

假设您有以下html:

 

使用您的示例View,我们可以将视图分配给foobar元素,并且只有该元素中的按钮才能获得click事件。

 var PersonView = Backbone.View.extend({ .... events : { "click button.btnSay" : "saySomething" }, saySomething : function(){ .... } ... }); new PersonView({ el: $("#foo") }); 

现在,当您单击foo div中的按钮时,您将获得saySomething回调。 但是因为PersonView的事件在elView中用于PersonView实例,所以单击bar的按钮将永远不会触发回调。