すべてのコードについて申し訳ありません:S
HomeIconView の要素に対する mouseenter/mouseleave バインディングが継続的に発生します。Firebug は、mouseenter/mouseleave の出力でコンソール出力の行を使い果たします。私は単にロールオーバー効果を達成したいだけです。それがバックボーンの使用方法であると想定する必要があります。今週使い始めたばかりです。これまでのところ、Firefox でのみテストしました。
「HomeView」ビューがレンダリングされると、「HomeIconView」ビューが「HomeView」ビューに動的に挿入されます。HomeIconView の「イベント」が呼び出されることに問題はありません。問題は、それらが継続的に呼び出されていることです! どうやら、マウスが実際に出入りするかどうかは問題ではありません。バックボーンは、最初の mouseenter の後、最後の mouseleave まで、マウスの動きがない場合でも renderRollOver() と renderRollOut() を反復し続けます。:(
私は解決策を探すのに何日も費やしました。私が見つけることができるのは、人々がイベントをバインドできないスレッドであり、アクティブなバインドされた関数呼び出しで人々が経験しているスレッドではありません。
一般的に、私はより良いコーディング方法の提案を受け入れますが、特に、このイベント bind mouseenter/leave の悲惨さから抜け出すのを助けてください。
繰り返しますが、すべてのコードを試してみてください。あいまいさを残したくありませんでした。
...
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;
}
});
...