Javascript 如何清除主干僵尸视图

我正在尝试制作我的第一个搜索应用程序

在应用程序构建之后，每个DOM都按照我的预期呈现，事件也可以正常工作。当我深入研究它时，我发现了一个奇怪的行为，在我做了一些搜索之后，我发现这是因为僵尸视图事件委托问题

以下是我代码的一部分：

var searchList = Backbone.View.extend({
    events:{
        'click #submit':function() {
            this.render()
        }
    },
    render() {
        this.showList = new ShowList({el:$('.ADoM')});
    }
});

单击

#submit

时，将创建

ShowList

的新实例，并呈现

'.ADoM'

DOM

showList.js

var showList = Backbone.View.extend({

    events: {
        "click .testing": function(e) {
            console.log(e.currentTarget);
        },
    },
    initialize() {
        this.$el.html(SearchListTemplate());
    }
});

”.testing“

按钮事件与之绑定

因此，正如“僵尸”所做的那样，在多次单击submit，然后单击

”.testing“

按钮之后，

console.log（）

将输出多次时间

---

我阅读了这篇文章，试图理解并解决我的问题，还试图在

showList.js

中添加

this.remove（）

，正如有人提到的，但不幸的是，可能是因为我无法将它们放在代码中的正确位置，所以问题仍然没有解决。

这与ES6无关，这是基本的JavaScript和DOM操作

不要在页面中共享同一元素 您正在创建新的

ShowList

实例，这些实例绑定到页面中的同一元素。实际上，这是一种糟糕的做法

每个主干视图实例都有其自己的根元素，事件绑定在该根元素上。当多个视图共享同一个元素时，会在每个实例上触发事件，并且不能调用该视图，因为它将从页面中完全删除DOM元素

您应该在希望重用的元素中转储子视图根元素

this.$('.ADoM').html(this.showList.render().el);

重用视图 该函数应为。

var searchList = Backbone.View.extend({
    events: {
        // you can use a string to an existing view method
        'click #submit': 'render'
    },
    initialize() {
        // instanciate the view once
        this.showList = new ShowList();
    },
    // This implementation always has the same result
    render() {
        this.$('.ADoM').html(this.showList.render().el);
        // Backbone concention is to return 'this' in the render function.
        return this;
    }
});

您的其他视图也可以简化，以反映来自父视图的更改

var showList = Backbone.View.extend({
    events: {
        "click .testing": 'onTestingClick',
    },
    // Don't render in the initialize, do it in the render function
    render() {
        this.$el.html(SearchListTemplate());
    },
    onTestingClick(e) {
        console.log(e.currentTarget);
    }
});

这是一个关于重用视图而不是总是创建新视图的超级基本示例

有必要进行一点清理 使用视图完成后，应调用它：

从DOM中删除视图及其

el

，并调用 删除视图已绑定的所有事件

为此，在注册对模型或集合事件的回调时，可以避免其他内存泄漏（或僵尸视图）

对于具有多个子视图的视图，一个好的模式是保留每个子视图的引用，并在删除父视图时对每个子视图调用

remove

---

看看怎么做。在处理大量视图（大列表或视图树）时，有一些方法涉及批处理和延迟。

对于2013年之前编写的主干相关内容要谨慎，因为它变化很大，而且旧文章和教程经常显示不好的做法。非常感谢您的详细解释！这对新的骨干学习者是一个很大的帮助！谢谢！