백본 좀비보기를 지우는 방법

Question

첫 번째 검색 앱을 만들려고합니다.

앱이 빌드 된 후 모든 DOM이 예상대로 렌더링되고 이벤트도 작동합니다. 내가 더 깊게 파고 들자 이상한 행동을하고 몇 가지 검색을 한 후 좀비보기 이벤트 위임 문제로 인해 발견되었습니다. DOM 렌더링됩니다

#submit을 클릭하면, ShowList의 새로운 인스턴스를 생성 할

var searchList = Backbone.View.extend({ 
    events:{ 
     'click #submit':function() { 
      this.render() 
     } 
    }, 
    render() { 
     this.showList = new ShowList({el:$('.ADoM')}); 
    } 
}); 

및 '.ADoM' : 여기

내 코드의 일부이다.

showList.js'.testing' 버튼 이벤트가 함께 결합되어

var showList = Backbone.View.extend({ 

    events: { 
     "click .testing": function(e) { 
      console.log(e.currentTarget); 
     }, 
    }, 
    initialize() { 
     this.$el.html(SearchListTemplate()); 
    } 
}); 

.

'zombie'는 제출시 여러 번 클릭 한 다음 '.testing' 버튼 console.log()을 여러 번 출력합니다.

나는 기사 here을 따라 이해하고 내 문제를 해결하기 위해 노력하고, 또한 누군가가 언급 한 바와 같이 showList.js에 this.remove()을 추가했지만, 불행하게도 내가 내 코드에서 적절한 위치에 배치 할 수 없습니다 수 있기 때문에 한

문제는 여전히 해결되지 않았습니다.

Answer 1

이것은 ES6과 아무 관련이 없습니다. 이것은 기본 JavaScript 및 DOM 조작입니다.

당신은 페이지의 동일한 요소에 결합되어 새로운 ShowList 인스턴스를 생성하고 페이지

에서 같은 요소를 공유하지 마십시오. 백본에서는 나쁜 습관입니다.

각 Backbone View 인스턴스에는 이벤트가 바인딩되는 고유 한 루트 요소가 있습니다. 여러 개의보기가 동일한 요소를 공유하면 이벤트가 각 인스턴스에서 트리거되고 페이지에서 DOM 요소가 완전히 제거되므로보기에서 remove을 호출 할 수 없습니다.

재사용하려는 요소 내에 하위 뷰 루트 요소를 덤프해야합니다.

this.$('.ADoM').html(this.showList.render().el); 

render 함수 idempotent 있어야보기

재사용.

var searchList = Backbone.View.extend({ 
    events: { 
     // you can use a string to an existing view method 
     'click #submit': 'render' 
    }, 
    initialize() { 
     // instanciate the view once 
     this.showList = new ShowList(); 
    }, 
    // This implementation always has the same result 
    render() { 
     this.$('.ADoM').html(this.showList.render().el); 
     // Backbone concention is to return 'this' in the render function. 
     return this; 
    } 
}); 

귀하의 다른 뷰는 상위 뷰에서 변경 사항을 반영하기 위해뿐만 아니라 단순화 할 수있다.

var showList = Backbone.View.extend({ 
    events: { 
     "click .testing": 'onTestingClick', 
    }, 
    // Don't render in the initialize, do it in the render function 
    render() { 
     this.$el.html(SearchListTemplate()); 
    }, 
    onTestingClick(e) { 
     console.log(e.currentTarget); 
    } 
}); 

이것은 항상 새로운 것을 만드는 대신보기를 재사용 할 때의 기본적인 기본 예입니다.

는 DOM에서보기와 el를 삭제 해, 어떤 바인딩을 제거 stopListening에 호출

약간의 정리는 전망 할 때 당신이 그것에 remove를 호출해야합니다,

필요하다 보기에 listenTo '의 이벤트가 있습니다. 이 작업을 위해 모델 또는 수집 이벤트에 대한 콜백을 등록 할 때

는 use listenTo over on or bind 다른 메모리 누수 (또는 좀비 뷰)를 방지 할 수 있습니다.

여러 자식보기가있는보기의 좋은 패턴은 각 자식보기의 참조를 유지하고 부모가 제거되면 각 자식보기에 remove을 호출하는 것입니다.

avoid memory leaks when rendering list views을 참조하십시오. 조회수가 많을 때 (큰 목록 또는 조회수 트리) efficiently render with Backbone에는 DocumentFragment 일괄 처리 및 지연이 포함됩니다.