Javascript 了解Backbone.js事件处理程序
因此,我的观点如下:Javascript 了解Backbone.js事件处理程序,javascript,jquery,backbone.js,Javascript,Jquery,Backbone.js,因此,我的观点如下: $(function() { var ImageManipulation = Backbone.View.extend({ el: $('body'), tagName: "img", events: { 'mouseover img': 'fullsize', 'click img#current': 'shrink' }, initialize: function() { _.b
$(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();
});
我不明白的是如何改变el,让“this”取代我的全尺寸点击功能。我更希望删除click jQuery函数,让mouseover函数成为另一个click,但我似乎不知道如何将“this”分配给正在单击的特定图像。我希望我的问题有意义。主干网的事件处理程序假定您想了解每个事件的对象(包括其代码和DOM表示形式,
View.el
对象),并且该事件旨在更改视图和/或模型的某些方面。点击的实际目标是你假定知道的东西,或者假定你能够推导出来的东西
推导相当简单:
fullsize: function(ev) {
target = $(ev.currentTarget);
并替换对目标的调用中的所有引用。
<代码>此。
将继续引用视图
实例。在您的内部函数中,分配给.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
我想您可能需要使用serialise
http://documentcloud.github.com/backbone/#View-扩展还有el:'body'
而不是$('body')
它在一个示例中,因此它可能希望它是一个字符串而不是一个object!我的代码现在看起来更简洁了,我对主干的了解也更多了!一种常见的替代方法是使用.bind()
方法(由主干依赖项下划线.js提供)将内部函数绑定到this
(视图对象),并使用ev.currentTarget
,而不是self/this
技巧。