title: Backbone refresh collection with event handler
body: <p>I'm using backbone and I'm very new at it, I have a list of products sizes and a list of quantities / prices. When someone selects a different product size, I use backbone to do an ajax call to the server to get me an updated price list. </p>
  
  <p>I'm struggling to get the save function to work so that I can return the updated collection. I will have to pass back a couple params, but for the time being, I'm just trying to get it to save to the backend. I've read save can be used to automatically setup the ajax request. </p>
  
  <p>I'd also only like this to load the template when the li element is clicked, not on page load. </p>
  
  <p>My code</p>
  
  <pre><code>var models = {};
  
  models.PriceModel = Backbone.Model.extend({   
  
  })
  
  models.PriceList = Backbone.Collection.extend({
  
      initialize: function(options) {     
          this.productId = options.productId;
      },
  
      model: models.PriceModel,
  
      url: function() {
             return '../product/pricing/' + this.productId + '.json'
          }  
  
  });
  </code></pre>
  
  <p>View</p>
  
  <pre><code>var PriceView = Backbone.View.extend({
      el: '#product-module',
  
      template: Handlebars.compile($("#priceTemplate").html()),
  
      events: {
          "click #product-dimensions li": "dimensionClicked",
      },
  
      initialize: function(){
          this.listenTo(this.collection, 'add', this.render);
          this.listenTo(this.collection, 'reset', this.render);
      },
  
      render: function() {
          this.$el.find('#product-quantities').html( this.template(this.collection.toJSON()));
      },
  
      dimensionClicked: function(event, callback){        
          this.collection.save({},{
                success: function(model, data){
                    console.log('success')
                    this.collection.fetch();
                },
                error: function(model, response) {
                    console.log('error! ' + response);
                }
            });
      },
  
  });
  </code></pre>
  
  <p>Page</p>
  
  <pre><code>&lt;script&gt;   
      var prices = new models.PriceList({productId:${productInstance.id}});
      var priceView = new PriceView({collection: prices});
  &lt;%--        prices.fetch({reset: true});--%&gt;
  &lt;/script&gt;
  </code></pre>
  
  <p>The error I'm getting. </p>
  
  <blockquote>
    <p>TypeError: this.collection.save is not a function     </p>
    
    <p>this.collection.save({},{</p>
  </blockquote>
  
  <p>How do I pass back a couple of params and then refresh the template?</p>