Backbone.js에서보기 삭제 또는 제거


83

현재 뷰에 대한 파괴 / 제거 방법을 구현하려고 시도하고 있지만 모든 뷰에서 작동하는 일반적인 솔루션을 얻을 수 없습니다.

나는, 컨트롤러에 부착하는 이벤트가있을 것이라고 기대했다 그래서 이전 뷰를 파괴를 통해 새로운 요청이 올 때 그 다음 새로운 사람을로드합니다.

각 뷰에 대해 제거 기능을 구축하지 않고도이를 수행 할 수있는 방법이 있습니까?


보기 생태계가 무엇인지 예를 들어 주실 수 있습니까? 귀하의 질문으로 인해 한 번에 페이지에 많은 조회수가 있다고 생각합니다. 나는 당신이하려는 일을 시각화 할 수 없기 때문에 당신이 필요로하는 대답을 제공 할 수 없습니다.
Bill Eisenhauer 2011

답변:


47

모든 정보를 모른 채 ... 재설정 트리거를 모델 또는 컨트롤러에 바인딩 할 수 있습니다.

this.bind("reset", this.updateView);

보기를 재설정하려면 재설정을 트리거하십시오.

콜백의 경우 다음과 같이하십시오.

updateView: function() {
  view.remove();
  view.render();
};

5
나는 이것이 옳지 않다고 생각합니다. 보기의 제거 기능은 DOM에서 해당보기의 요소를 제거합니다 ( 여기 참조 ). 이 사람은 뷰 객체를 완전히 제거하고 싶어합니다.
Nutritioustim

2
this.remove ()는 데이터와 이벤트도 제거하는 jquery의 remove ()를 호출합니다. 그럼에도 불구하고 사용자 지정 이벤트 나 모델 변경과 같은 다른 이벤트에서 바인딩을 해제하려면 this.undelegateEvents를 호출해야한다고 생각합니다 ..
opensas

21
this.remove()통화 this.stopListening()this.$el.remove(). 첫 번째는를 사용하여 추가 된 모든 이벤트 리스너를 제거합니다 this.listenTo(...). 두 번째는 jQuery를 사용하여 추가하는 모든 이벤트 리스너를 제거합니다. 둘 사이에서 이벤트 리스너를 추가하는 다른 방법을 사용하지 않는 한 다루어야합니다. 그래서이 대답은 정확하고 저로부터 +1을받습니다.
chowey

162

뷰가 DOM에서 제거되었을뿐만 아니라 이벤트에서 완전히 언 바운드되었는지 절대적으로 확인해야했습니다.

destroy_view: function() {

    // COMPLETELY UNBIND THE VIEW
    this.undelegateEvents();

    this.$el.removeData().unbind(); 

    // Remove view from DOM
    this.remove();  
    Backbone.View.prototype.remove.call(this);

}

나에게는 과잉 살인처럼 보였지만 다른 접근 방식은 완전히 트릭을 수행하지 못했습니다.


10
내가 본 것에 대해 this.remove ()는 jQuery의 remove를 호출해야합니다. 이는 DOM에서 요소를 제거 할뿐만 아니라 첨부 된 데이터와 이벤트도 제거해야합니다. 그래서 undelegateEvents 및 removeData에 대한 호출이 필요하지 않아야한다고 생각합니다 ... 맞습니까?
opensas

1
@opensas 이벤트는 DOM에서 요소가 제거 되었음에도 불구하고 this.remove () 지나서 지속되었습니다. this.undelegateEvents ()는 모든 이벤트의 바인딩을 해제하는 데 필요했습니다. 내가 말했듯이, 그것은 과잉 살인처럼 느껴졌지만 트릭을했습니다.
sdailey

3
나는 그것을 좋아한다. 하지만 ;) this.$el대신 사용해야하지만$(this.el)
mreq

3
내 문제에 대한 좋은 답변 +1, 첫 번째 답변 작성 +1 :)
1nfiniti

1
내 견해는 그것을 파괴하고 다시 만들 때 다시 렌더링되지 않습니다. 때문 this.remove()입니까?
Raeesaa

20

나는 내가 파티에 늦었다는 것을 알고 있지만, 이것이 다른 누군가에게 도움이되기를 바랍니다. 당신이 백본 v0.9.9의 +를 사용하는 경우, 사용 수 listenTostopListening

initialize: function () {
    this.listenTo(this.model, 'change', this.render);
    this.listenTo(this.model, 'destroy', this.remove);
}

stopListening에 의해 자동으로 호출됩니다 remove. 여기여기에서 더 많은 것을 읽을 수 있습니다.


8

이것이 제가 사용해온 것입니다. 어떤 문제도 보지 못했습니다.

destroy: function(){
  this.remove();
  this.unbind();
}

4

현재 백본 문서에 따르면 ....

view.remove ()

DOM에서 뷰와 해당 el을 제거하고 stopListening을 호출하여 뷰에 listenTo'd가있는 바인딩 된 이벤트를 제거합니다.


0

나는 이것이 효과가 있다고 생각한다

destroyView : function () {
    this.$el.remove();
}

와 또한 청취자를 죽여야 this.stopListening()다음과 return this좋은 측정을위한
브랜든

0

문제를 해결하는 방법을 사용할 수 있습니다!

initialize:function(){
    this.trigger('remove-compnents-cart');
    var _this = this;
    Backbone.View.prototype.on('remove-compnents-cart',function(){
        //Backbone.View.prototype.remove;
        Backbone.View.prototype.off();
        _this.undelegateEvents();
    })
}

다른 방법 : 다음과 같이 전역 변수를 만듭니다._global.routerList

initialize:function(){
    this.routerName = 'home';
    _global.routerList.push(this);
}
/*remove it in memory*/
for (var i=0;i<_global.routerList.length;i++){
    Backbone.View.prototype.remove.call(_global.routerList[i]);
}

첫 번째 접근 방식이 저에게 효과적이었습니다. 뷰 고 스팅과 비슷한 문제가 발생했으며 양식을 제출할 때 각 뷰가 다시 생성 될 때 이벤트가 여러 번 실행되었습니다
ONYX
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.