对不起所有的代码：S
HomeIconView 中元素上的 mouseenter/mouseleave 绑定不断触发。Firebug 在 mouseenter/mouseleave 输出中的控制台输出行数不足。我只是想实现翻转效果。我必须假设这是我使用主干的方式。我这周才开始使用。到目前为止，我只在 Firefox 中进行了测试。
当“HomeView”视图被渲染时，“HomeIconView”视图被动态插入到“HomeView”视图中。调用 HomeIconView 的“事件”没有问题，问题是它们不断被调用！显然，鼠标实际上是进入还是离开并不重要。Backbone，在最初的 mouseenter 之后直到最后的 mouseleave，即使没有鼠标移动，也会不断地迭代 renderRollOver() 和 renderRollOut()。:(
我花了几天时间寻找解决方案。我能找到的只是人们无法绑定事件的线程，而不是人们正在经历活动绑定函数调用的线程。
一般来说，我愿意接受任何更好的编码实践的建议，但特别是，请帮助我摆脱对这个事件绑定鼠标进入/离开事件的痛苦。
再说一遍，对所有代码都很抱歉，我不想留下任何歧义。
...
window.HomeIconView = Backbone.View.extend ({
model: new HomeIconModel,
template: _.template([
'<a href="#">',
'<div class="homeIcon" id="homeIcon-<%= id %>">',
'<img src="<%= homeIconSrc %>">',
'</div>',
'</a>'
].join('')),
events: { 'mouseenter': 'renderRollOver', 'mouseleave': 'renderRollOut' },
initialize: function(md) {
_.bindAll(this, 'render');
this.id = 'Icon-' + md.c.id.toString();
this.model.save(md.c);
},
render: function() {
return this.$el.html(this.template(this.model.toJSON()));
},
renderRollOver: function() {
console.log('rollover');
$('#homeRollOver, #homeRollOver2').css({ 'display': 'block', 'opacity': 0.125 });
$('#home' + this.id).stop().animate( { opacity: 1 }, 1000);
var elOffset = $('#home' + this.id).offset();
var elOffsetL = elOffset.left -
(
(
parseInt($('#homeRollOver').css('width')) -
parseInt($('#home' + this.id).css('width'))
) / 2
);
var elOffsetT = elOffset.top -
(
(
parseInt($('#homeRollOver').css('height')) -
parseInt($('#home' + this.id).css('height'))
) / 2
);
$('#homeRollOver, #homeRollOver2').css(
{ 'marginLeft': elOffsetL, 'marginTop': elOffsetT }
);
},
renderRollOut: function() {
console.log('rollout');
$('#homeRollOver, #homeRollOver2').css('display', 'none');
$('#home' + this.id).stop().animate({ opacity: 0.125 }, 1000 );
}
});
window.HomeView = Backbone.View.extend({
model: new PreloadHomeImages,
template: _.template([
'<div id="homeIconWrapper"></div>',
'<div id="homeRollOver"></div>',
'<div id="homeRollOver2"></div>'
].join('')),
initialize: function() {
_PAGE_H = $(document).height();
_PAGE_W = $(document).width();
this.preload();
this.render();
},
preload: function() {
var i = 0;
_.each(this.model.get('icons'), function(icon) {
var tmpimg = $('<img/>');
tmpimg.src = icon.image;
i++;
});
this.$el.css('paddingTop', (_PAGE_H - 180) / 2) ;
$('#wrapper').css('height', _PAGE_H - 50);
},
render: function() {
this.$el.html(this.template);
var i = 0;
_.each(this.model.get('icons'), function(icon) {
var iconView = new HomeIconView({
model: new HomeIconModel,
c: { 'id': i, 'homeIconSrc': icon.image }
});
$('#homeIconWrapper').append(iconView.render);
i++;
});
return this;
}
});
...