javascript 了解 Backbone.js 事件处理程序
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6847182/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Understanding Backbone.js event handler
提问by thatmiddleway
So here is my view:
所以这是我的观点：
$(function() {
var ImageManipulation = Backbone.View.extend({
el: $('body'),
tagName: "img",
events: {
'mouseover img': 'fullsize',
'click img#current': 'shrink'
},
initialize: function() {
_.bindAll(this, 'render', 'fullsize', 'shrink');
//var message = this.fullsize;
//message.bind("test", this.fullsize);
},
render: function() {
},
fullsize: function() {
console.log("in fullsize function");
console.log(this.el);
$('.drop-shadow').click(function() {
console.log(this.id);
if (this.id != 'current') {
$('.individual').fadeIn();
$(this).css('position', 'absolute');
$(this).css('z-index', '999');
$(this).animate({
top: '10px',
height: '432px',
}, 500, function() {
this.id = "current";
console.log("animation complete");
return true;
});
};
});
},
shrink: function() {
$('.individual').fadeOut();
$('#current').animate({
height: '150px',
}, 500, function() {
this.id = "";
$(this).css('position', 'relative');
$(this).css('z-index', '1');
console.log("animation complete");
return true;
});
}
});
var startImages = new ImageManipulation();
});
What I don't understand is how to change the el to make 'this' take over the click function I have in full-size. I would much rather have the click jQuery function removed and have the mouseover function be another click, but I cant seem to figure out how to assign 'this' to the particular image that is being clicked. I hope my question makes sense.
我不明白的是如何更改 el 以使 'this' 接管我在全尺寸中拥有的点击功能。我更愿意删除单击 jQuery 功能并使鼠标悬停功能再次单击，但我似乎无法弄清楚如何将“this”分配给正在单击的特定图像。我希望我的问题是有道理的。
回答by Elf Sternberg
Backbone's event handler assumes that you want to know about the object (both its code, and its DOM representation, the View.elobject) for every event, and that the event is intended to change some aspect of the view and/or model. The actual target of the click is something you're assumed to know, or assumed to be able to derive.
Backbone 的事件处理程序假定您想了解View.el每个事件的对象（包括其代码及其 DOM 表示、对象），并且该事件旨在更改视图和/或模型的某些方面。点击的实际目标是您假定知道或假定能够推导出的内容。
Derivation is rather simple:
推导相当简单：
fullsize: function(ev) {
target = $(ev.currentTarget);
And replace all your this.references within your call to target.. this.will continue to refer to the Viewinstance. In your inner function, the anonymous one assigned to .drop-shadow, this.will refer to the object that was just clicked on. If you want access to the surrounding context, use the closure forwarding idiom:
并this.在调用中替换所有引用target.。 this.将继续引用View实例。在你的内部函数，匿名一个分配.drop-shadow，this.将引用刚点击的对象。如果您想访问周围的上下文，请使用闭包转发习惯用法：
fullsize: function(ev) {
var target = ev.currentTarget;
var self = this;
$('.drop-shadow').click(function(inner_ev) {
console.log(this.id); // the same as inner_ev.currentTarget
console.log(self.cid); // the containing view's CID
