骨干视图更新意外

Question

我是Backbone的新手，并尝试编写一些简单的应用程序来学习主干。

应用程序包含一个项目列表，用户可以添加/删除/项目，当用户悬停其中一个项目视图时，该项目应将其颜色更改为红色，此外，其颜色应为黑色。

    var ItemView = Backbone.View.extend({
        tagName: 'li',
        events: {
            'click a.delete': 'onDelete',
            'mouseover': 'onHoverIn',
            'mouseout': 'onHoverOut'
        },
        template: _.template($('#tpl-item').html()),
        initialize: function () {
            this.model.on("change", this.render, this);
        },
        render: function () {
            var item = this.model;
            this.$el.css("color", item.get("hover") ? "red" : "black").html(this.template(item.toJSON()));
            return this;
        },
        onDelete: function () {
            this.model.destroy();
        },
        onHoverIn: function () {
            this.model.set("hover", true);
        },
        onHoverOut: function () {
            this.model.set("hover", false);
        }
    });

这是该应用的完整代码：jfiddle live example

然而，当我将鼠标一个接一个地慢慢移动到项目上时，它会起作用，一旦我快速移动，我发现可能有多个项目用红色着色，这是不可取的。

发生了什么？

Answer 1

因为重新渲染对于浏览器来说是一项繁重而广泛的任务，并且不知何故（老实说，我不知道背后的魔力）它错误地触发了事件。
为了减少浏览器重排，我通过添加和删除类＆gt;＆gt;来将颜色操作转换为重绘。 see here the update code

onHoverIn: function() {
    this.$el.addClass('hover');
    console.log('in: ' + this.model.get('name'));
  },
  onHoverOut: function() {
    this.$el.removeClass('hover');
    console.log('out: ' + this.model.get('name'));
  }