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

你仍然有调整你呈现逻辑复位时，恰巧从视图中删除旧的标记。