Question

所以，我有一个表格视图（父级）和行视图（子级）。

我使用此代码添加每一行

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 {cid: "c3", attributes: Object, ...}

为什么模型会重复？

Answer 1

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

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

您的项目视图

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

然后是列表视图

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 = [];
    },
});

Backbone Collection模型自身复制

1 个答案: