導航視圖骨幹不刪除模型

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

這是的OnClose方法在子視圖上：

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

我將所有子視圖保存在數組上，然後在導航時關閉。我真的沒有發現這個問題的根源。

我很絕望，因爲我已經嘗試了Derick Bailey的所有帖子，並通過Backbone的文檔進行了嘗試，但無法解決此問題。

------ -------- EDIT 視圖組成爲：

1. 父視圖：包含一個表，首標，沒有行。
2. 子視圖：哪些是行 - ><tr>
3. 模式的看法：這是一個包含用於創建模型

這是我的回購，如果你想看看形式 視圖。實際上重現最小的事情是在一個問題中發佈很多代碼。 REPO

我很感謝幫助。

Answer 1

這是我懷疑問題所在。您的Departments集合僅實例化一次，app.Departments = new DepartmentList();。然後在DepartmentsView初始化函數中，指定this.collection = app.Departments;這意味着您第二次路由到DepartmentsView時，您將其集合分配給已有模型的現有集合。當您撥打fetch()時，Backbone檢測到沒有新模型（因爲您已經擁有集合中的模型），因此不會觸發添加事件。

你可以做的一件事就是調用與重置的提取，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; 
    },