백본보기가 예기치 않게 업데이트되었습니다.

Question

백본에 새 기능을 추가하고 백본을 배우기위한 간단한 응용 프로그램을 작성하려고합니다.

응용 프로그램에는 항목 목록이 포함되어 있으며 사용자가 항목보기 중 하나를 가리키면 해당 항목의 색이 빨간색으로 바뀌고 그 색은 검은 색이어야합니다.

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