Question

抱歉所有代码：S

HomeIconView中元素上的mouseenter / mouseleave绑定不断持续触发。 Firebug在mouseenter / mouseleave输出中用完控制台输出的行。我只是想实现翻转效果。我必须假设它是我如何使用骨干。我本周才开始使用。到目前为止，我只在Firefox中测试过。

呈现“HomeView”视图时，“HomeIconView”视图将动态插入“HomeView”视图中。调用HomeIconView的“事件”是没有问题的，问题是它们不断被调用！显然，鼠标是否实际进入或离开并不重要。 Backbone，在初始mouseenter之后直到最后的mouseleave，即使没有鼠标移动，也只是继续迭代renderRollOver（）和renderRollOut（）。：（

我花了几天时间寻找解决方案。我所能找到的只是人们无法绑定事件的线程，而不是人们遇到活动绑定函数调用的线程。

总的来说，我对任何更好的编码实践的建议持开放态度，但特别是，请帮助我摆脱这个事件绑定mouseenterenter / leave事件的痛苦。

再次，sry回合所有的代码，我想不留下任何歧义。

...

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;
}
}); 
...

Answer 1

HomeIconView在实例化时需要有效的ID。

稍后当我尝试实现翻转时，我遇到了mu_is_too_short描述的问题，因为元素的z-index导致mouseenter / leave也连续触发。两个答案都是对的。再次感谢@mu_is_too_short。

实施例

http://3d.rededitor.net/site2/

Backbone - View Element持续触发Mouseenter / Mouseleave

1 个答案: