警报触发多次backbonejs窗口答案

【问题标题】：Alert trigger multiple times backbonejs window警报触发多次backbonejs窗口
【发布时间】：2014-03-19 10:13:36
【问题描述】：

我昨天得到了这个奇怪的东西。我尝试了几次来解决这个问题。当我两次返回相同的页面时，我的应用会多次触发警报，这取决于我访问该页面的次数。我已经通过这个网站和互联网对这个“僵尸”事物和内存不足进行了一些研究，但我发现了死胡同。 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);
},

为什么会这样？

【问题讨论】：

标签： javascript jquery backbone.js

【解决方案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/

【讨论】：

另一种不那么残酷的可能性是使用带有$(window).on('scroll', this.pancakes) 的命名方法，以便您可以$(window).off('scroll', this.pancakes)。