Question

我昨天得到了这个奇怪的东西。我尝试了几个时间来解决这个问题。当我两次回到页面时，我的应用程序多次触发警报，取决于我访问该页面的次数。我已经通过这个网站和互联网做了一些关于这个“僵尸”事物和记忆缺乏的研究，但我找到了死胡同。已经2天了，无法解决这个问题。

我的代码

查看页面

initialize: function() {
    $(window).scroll(function() {
        if ($(window).scrollTop() + $(window).height() == $(document).height()) {
            alert("bottom!");
        }
    });
    this.bind("reset", this.updateView());
},
render: function() {
    this.$el.html(notificationListViewTemplate);
},
updateView: function() {
    console.log("clear");
    this.remove();
    this.render();
}

路由器

showNotificationList: function(actions) {
    var notificationListView = new NotificationListView();
    this.changePage(notificationListView);
},

为什么会这样？

Answer 1

调用View.remove确实会取消视图

设置的事件

删除 view.remove（）
从DOM中删除视图，并调用stopListening以删除视图已侦听的任何绑定事件。

但它只能在它知道的事件上执行此操作：事件哈希设置的事件或调用this.listenTo

您设置了一个滚动侦听器，但您永远不会删除它，这意味着过去的视图会继续倾听：请参阅此困境的演示http://jsfiddle.net/nikoshr/E6MQ6/

在这种情况下，您无法使用事件的哈希值，因此您必须自己处理清理工作，例如重写remove方法：

var V = Backbone.View.extend({
    initialize: function() {
        $(window).scroll(function() {
        if ($(window).scrollTop() + $(window).height() == $(document).height()) {
            console.log("bottom!");
        }
        });
    },
    render: function() {
    },
    updateView: function() {
        console.log("clear");
        this.remove();
        this.render();
    },
    remove: function() {
        Backbone.View.prototype.remove.call(this);
        $(window).off('scroll'); // for example, will remove all listeners of the scroll event
    }
});

演示http://jsfiddle.net/nikoshr/E6MQ6/1/

通过使用命名空间的侦听器来删除滚动事件的情况稍微有点残缺：

var V = Backbone.View.extend({
    initialize: function() {
        $(window).on('scroll.'+this.cid, function() {
            ...
        });
    },
    remove: function() {
        Backbone.View.prototype.remove.call(this);
        $(window).off('scroll.'+this.cid);
    }
});

http://jsfiddle.net/nikoshr/E6MQ6/2/

警报触发多次backbonejs窗口

1 个答案: