javascript - Backbone 集合模型 self 复制

Question

所以，我有一个 TableView (父 View )和行 View ( subview )。

我用这段代码添加每一行

addOne: function (model, base) {
    var view = new App.Views.file_manager_item({model: model});
    base.append(view.render());
},

renderList: function () {
    var _this = this;
    var collection = this.files_collection;

    document.getElementById("content").innerHTML = this.templates.table(this.context);

    this.$files = $(document.getElementById('files'));

    collection.each(function(model) {
        _this.addOne(model, _this.$files);
    });
},

renderList 由以下人员触发:

this.listenTo(this.files_collection, "change", this.renderList);

App.Views.file_manager_item 是

var File_manager_item = Backbone.View.extend({
    tagName: 'tr',

    initialize: function () {
        this.listenTo(this.model, "change", this.render);
    },

    template: Template7.compile(document.getElementById("fm_item_template").innerHTML),

    events: {
        "click .check": "toggleCheck",
    },

    toggleCheck: function () {
        this.test = !this.test;

        this.model.set({
            "checked": this.test
        });
    },

    render: function () {
        console.log(this.model)
        var context = this.model.toJSON();
        this.el.innerHTML = this.template(context);
        return this.$el;
    },
});

第一次运行返回到控制台

child {cid: "c3", attributes: Object, ...}
...
...
...
...
child {cid: "c11", attributes: Object, ...}

toggleCheck 函数运行两次后

child {cid: "c3", attributes: Object, ...}
child {cid: "c3", attributes: Object, ...}
...
...
...
...
child {cid: "c11", attributes: Object, ...}

每次模型更改后，在控制台中添加新的child

child {cid: "c3", attributes: Object, ...}

为什么模型会重复？

Answer 1

模型并没有增加，只是 View 仍然存在，即使不再出现在页面上。这是一种内存泄漏。同一个模型有多个项目 View ，都在监听它的 change 事件。

避免这些泄漏的一个好方法是在创建项目 View 时保留对项目 View 的引用，然后调用 .remove()在重新渲染之前在所有这些上。

您的项目 View

var File_manager_item = Backbone.View.extend({
    tagName: 'tr',
    template: Template7.compile(document.getElementById("fm_item_template").innerHTML),

    events: {
        "click .check": "toggleCheck",
    },
    initialize: function() {
        this.listenTo(this.model, "change", this.render);
    },

    toggleCheck: function() {
        this.test = !this.test;
        this.model.set({ "checked": this.test });
    },

    render: function() {
        console.log(this.model);
        // use jQuery because it's already available
        this.$el.html(this.template(this.model.toJSON()));
        return this; // return this to chain calls
    },
});

然后是 ListView

var ListView = Backbone.View.extend({
    initialize: function() {
        this.childViews = [];
        this.listenTo(this.files_collection, "change", this.renderList);
    },
    addOne: function(model) {
        var view = new App.Views.file_manager_item({ model: model });
        this.childViews.push(view);

        // this.$files is available here, there's no need to pass it around
        this.$files.append(view.render().el);
    },

    renderList: function() {

        // same thing, use jQuery, it's useless to use the native API to them put it 
        // into a jQuery object, unless a marginal performance gain is the goal.
        this.$("#content").html(this.templates.table(this.context));
        this.$files = this.$('#files');
        this.cleanup();

        // collection's each function is just a proxy to the underscore one.
        this.files_collection.each(this.addOne, this); // use the context argument
        return this;
    },

    cleanup: function() {
        _.invoke(this.childViews, 'remove');
        this.childViews = [];
    },
});