백본 클릭 이벤트는보기가있는 횟수만큼 실행됩니다.

Question

이 항목에 대한 정보를 검색했지만 이벤트 요소를 가져 오는 방법에 대한 정보 만 발견했습니다. 예, clicked div의 요소를 얻을 수 있지만 19 번 모두 해고 된 이유는 무엇입니까? (총 조회수입니다). 클릭 한 이벤트의 정보는 클릭 한 div의 동일합니다. http://d.pr/i/AbJP 다음

가 CONSOLE.LOG입니다 : 여기 http://d.pr/i/zncs

이하는 index.js

의 코드

$(function() { 
var Table = new Backbone.Collection; 
var TrModel = Backbone.Model.extend({ 
    defaults: { 
     id: '0', 
     name: 'defaultName' 
    }, 
    initialize: function() { 
     this.view = new Tr({model: this, collection: Table}); 
     this.on('destroy', function() { 
      this.view.remove(); 
     }) 
    } 
}); 
var Tr = Backbone.View.extend({ 
    el: $('.pop-tags').find('.container'), 
    template: _.template($('#td_template').html()), 
    events: { 
     'click .tag': 'clicked' 
    }, 
    clicked: function (event) { 
     event.preventDefault(); 
     event.stopPropagation(); 
     console.log(event.currentTarget); 
    }, 
    initialize: function() { 
     this.render(); 
    }, 
    render: function() { 
     this.$el.append(this.template(this.model.attributes)); 
     return this; 
    } 
}); 
for (var i = 0, size = 19; i < size; i++) { 
    var trModel = new TrModel({id: i, name: 'name_' + i}); 
    Table.add(trModel); 
} 

}); 여기

는 div의 모양을하다

모든 요소가 이벤트를 발생시키는 것을 피하고 클릭 한 번만 한 번만 시작하면 어떻게됩니까?

Answer 1

el: $('.pop-tags').find('.container'), 

하지 마십시오. 모든보기 인스턴스를 동일한 DOM 노드에 연결하고 있습니다. 각 백본보기에는 별개의 DOM 노드가 필요하며, 위와 같이 위임 이벤트는 완전한 혼란이됩니다. 보기에서 tagName: 'tr'으로 설정 한 다음보기를 만들 때 .render()을 호출 한 다음 $('.table-where-views-go').append(trView.el);과 같은 DOM에 추가하십시오.

테이블과 행이보기 관련 개념이기 때문에 당신은 또한 기본적인 MVC 개념에 브러시 할 수는없는 모델 관련, 그래서 TrModel라는 클래스가보기 대 모델에 명확하지 않다 코드 냄새입니다 .

Answer 2

문제 해결을 위해 약간 다른 방법을 사용합니다.

모든 tr에 대해 하나의보기 대신 전체 표에 대해 하나의보기를 만들 것입니다.

뷰를 만들 때 뷰에 19 개 모델이 포함 된 컬렉션을 전달하고 view.initialize에서 컬렉션을 사용하여 행을 렌더링합니다.

작업 예제로 jsbin을 만들었습니다.