主干视图意外更新

Question

我是Backbone的新手，想写一些简单的应用来学习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

因为重新渲染对于浏览器来说是一项繁重而庞大的任务，并且不知何故（老实说我不知道​​背后的魔力）它错误地触发了事件。
为了减少浏览器重排，我通过添加和删除类将颜色操作转为重绘 >> 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'));
  }