Backbone.js：如何強制更改模型集合時自動刷新視圖

Question

因此，我有一個如下所示的視圖。

//base class 
    var SelectListView = Backbone.View.extend({ 
     initialize: function() { 
      _.bindAll(this, 'addOne', 'addAll'); 
      this.collection.bind('reset', this.addAll); 
     }, 
     addAll: function() { 
      this.collection.each(this.addOne); 
     }, 
     events: { 
      "change": "changedSelected" 
     }, 
     changedSelected: function() { 
      this.selected = $(this.el); 
      this.setSelectedId($(this.el).val()); 
     } 

    }); 

    //my extended view 
    var PricingSelectListView = SelectListView.extend({ 
     addOne: function(item) { 
      $(this.el).append(new PricingView({ model: item }).render().el); 
     }   
    }); 

我已經實例化這樣的觀點...

var products = new ProductPricings(); 
var pricingsView = new PricingSelectListView({ 
    el: $("#sel-product"), 
    collection: products 
}); 

別的地方（另一種觀點自定義的方法），我已經更新了定價視圖的集合

pricingsView.collection = new ProductPricings(filtered); 

這不可見做任何事。

pricingsView.render(); 

所以現在收集的項目較少，但新的視圖永遠不會在DOM中呈現或刷新。

我該怎麼做1.）刷新DOM中的渲染？ 2.）讓它自動刷新DOM？我是否必須以某種方式告訴它在集合更改時進行渲染？

Answer 1

您綁定了addOne()到reset事件。當您只更換pricingsView.collection實例時，則不會觸發該事件，並且不會執行addOne()。

嘗試，而不是：

pricingsView.collection.reset(filtered); 

Answer 2

這可能會實現，因爲你綁定到集合的復位事件已經：

pricingsView.collection.reset(filtered); 

http://backbonejs.org/#Collection-reset

你仍然有調整你呈現邏輯復位時，恰巧從視圖中刪除舊的標記。