Как удалить/уничтожить Магистральный вид, который добавлен к телу

Question

У меня есть это базовое приложение, где новый вид запускается событием клика и добавляется в тело DOM, как всплывающее окно. Моя проблема заключается в том, что я хочу, чтобы новый вид полностью удалялся, когда я нажимаю кнопку «Внешний вид». Вот событие, которое запускает новый вид:

view1.js:

events: { 
    'click .btn': 'popupView' 
}, 
popupView: function(){ 
    new popup.View().render(); 
} 

Тогда код к «всплывающей» вид:

popup.View = Backbone.View.extend({ 
    template: 'some_template', 
    initialize: function(){ 
     this.$el.appendTo("body"); 
     this.render(); 
    }, 

    afterRender: function(){ 
     $("body").click(function(){ 
      $('div.wrap').remove(); // removes the wrap div from the html template 
      this.remove() // does not work 
    }) 

}) 

Дело в том, что, как только я нажмите на тело после просмотра всплывающего окна, он удалит обертку div html из DOM, но когда я снова открою всплывающее представление, предыдущий HTML будет отображен дважды и т. д. и т. д. Таким образом, это означает, что View не был удалены/уничтожены в конце концов.

Любое предложение, как решить эту проблему? Спасибо ...

Answer 1

Это потому, что внутри функции обратного вызова есть контекст. Попробуйте это:

afterRender: function(){ 
    var that = this; 
    $("body").click(function(){ 
     $('div.wrap').remove(); 
     that.remove(); // should work 
}) 

Позвольте мне знать, если это работает