如何删除/销毁附加到正文的主干视图

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

})

问题是，当我在弹出视图渲染后单击正文时，它会从 DOM 中删除包装 div html，但是当我再次打开弹出视图时，之前的 HTML 会被渲染两次，依此类推。因此，这表明视图毕竟没有被删除/销毁。

任何建议如何解决这个问题？谢谢...

Answer 1

那是因为this 的上下文在回调函数内部是不同的。试试看：

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

让我知道这是否有效