我是backbone.js 的新手。我在 Backbone.js 中看到事件绑定(bind):
var PersonView = Backbone.View.extend({
....
events : {
"click button.btnSay" : "saySomething"
},
saySomething : function(){
....
}
...
});
...不需要button.btnSay在调用时存在,这与Jquery中的“委托(delegate)”非常相似。
现在的问题是,我们可以将 html 页面中的任何 按钮 更改为 .btnSay (通过 Firebug 等)。他们最终得到了听众。我们怎样才能防止这种情况发生?
最佳答案
在底层,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
内的按钮永远不会触发回调。
关于jquery - Backbone.js 事件绑定(bind)。就像 Jquery 中的 "delegate"一样?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7802205/