javascript - 导航 View Backbone 不会删除模型

Question

问题通过以下方式重现:

1. 导航至路线
2. 导航离开
3. 返回

每当我向后导航时，模型都不会渲染。我想这是因为这个事件没有被触发:

this.listenTo(this.collection, 'add', this.addOne);
this.listenTo(this.collection, 'reset', this.addAll);

这是我的路由器:

    routes: {
        ''               : 'home',
        'home'           : 'home',
        'departments'    : 'departments',
        ...
    },

    home: function(){
        var view = new app.HomeView();
        this.showView(view);
    },

    departments: function(){
        var view = new app.DepartmentsView();
        this.showView(view);
    }, 
    showView: function(view){
         if (this.currentView){
          this.currentView.clean();
        }

        this.currentView = view;
        this.currentView.render()

        $('#container').html(this.currentView.el);
    }

这是我的干净方法:

Backbone.View.prototype.clean = function () {
    this.remove();
    this.unbind();
    _.each(this.subViews, function(subView){
        subView.clean();
        if(subView.onClose){ subView.onClose() }
    });
};

这是 subview 的 onClose 方法:

onClose: function(){
        this.model.off('change',this.render);
        this.model.off('destroy',this.remove);
        console.log('unbinding');
    }

我将所有 subview 保存在数组中，然后在离开时关闭。我确实还没有找出这个问题的根本原因。

我非常绝望，因为我已经尝试了 Derick Bailey 的帖子中的所有内容并浏览了 Backbone 的文档，但仍无法解决此问题。

------编辑-------- View 的组成为:

1. 父 View :包含表格、标题，不包含行。
2. subview :哪些行 --> <tr>
3. 模态视图:这是一个包含创建模型的表单的 View

如果你想看一下，这是我的存储库。复制最小的东西实际上需要在问题中发布大量代码。 REPO

非常感谢您对此的帮助。

Answer 1

这就是我怀疑的问题所在。您的 Departments 集合仅实例化一次，app.Departments = new DepartmentList();。然后在您的 DepartmentsView 初始化函数中，您分配 this.collection = app.Departments; 这意味着您第二次路由到 DepartmentsView 时，您正在将其集合分配给已有模型的现有集合。当您调用 fetch() 时，Backbone 检测到没有新模型(因为集合中已有模型)，因此不会触发添加事件。

您可以做的一件事是调用带有重置的 fetch，fetch({reset:true})。然后，当获取成功时，它将清除现有模型并重新添加所有模型，并触发重置。

重置有点浪费，因为你已经有了模型。另一个解决方案是检查集合是否包含 init 函数中的任何模型，如果包含则渲染它们。像这样的事情

initialize: function(){
        this.collection = app.Departments;
        this.subViews = [];

        if(this.collection.size() > 0)
            this.collection.each(this.addOne, this);

        this.listenTo(this.collection, 'add', this.addOne);
        this.listenTo(this.collection, 'reset', this.addAll);

        this.collection.fetch();
    },

然后，获取将在获取成功后添加它找到的任何新模型。

编辑:不是最干净的解决方案，但它应该可以工作。

initialize: function(){
        this.collection = app.Departments;
        this.subViews = [];

        if(this.collection.size() > 0)
            this.preExisting = true;

        this.listenTo(this.collection, 'add', this.addOne);
        this.listenTo(this.collection, 'reset', this.addAll);

        this.collection.fetch();
    },

    render: function(){
        this.$el.html( this.template({title: 'Departamentos',header_fields: this.tableHeader}) );
        this.$tbody = this.$('#rows');

        if(this.preExisting)
            this.collection.each(this.addOne, this);

        return this;
    },