title: Backbone.js: How do I force the View to automatically refresh when changing a models collection
body: <p>So I have a View that looks like this.</p>
  
  <pre><code>    //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);
          }         
      });
  </code></pre>
  
  <p>I have instantiated the view like this...</p>
  
  <pre><code>var products = new ProductPricings();
  var pricingsView = new PricingSelectListView({
       el: $("#sel-product"),
       collection: products
  });
  </code></pre>
  
  <p>Somewhere else (another views custom method)I have updated the pricing view's collection</p>
  
  <pre><code>pricingsView.collection = new ProductPricings(filtered);
  </code></pre>
  
  <p>This does not seen to do anything.</p>
  
  <pre><code>pricingsView.render();
  </code></pre>
  
  <p>So now the collection has fewer items but the new view is never rendered or refreshed in the DOM.</p>
  
  <p><strong>How to I do I 1.) refresh the rendering in the DOM? 2.) Make it automatically refresh the DOM? Do I have to somehow tell it to render when ever the collection changes?</strong></p>