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
中单击按钮将永远不会触发回调。