title: Backbone filter collection and rendering it
body: <p>I'm still quite new to backbone, so I'm sorry if there is any gross error in what I'm doing.</p>
  
  <p>What I'm trying to do seems very simple: getting a collection of models from the db and do some filters on it. Let's say we are trying to filter hotels. Once I have my main collection, I would like to filter them for price, stars, and so on (pretty much what you can find in yelp or tripadvisor or so) - and of course, I want to "reset" the filters once the user uncheck the different checkboxes.</p>
  
  <p>So far, I have 3 views:
   - one view based on the panel where the results will be displayed
   - one view based on a template that represents each item (each hotel)
   - one view will all the filters I want to use.</p>
  
  <p>The problem I am having is that I am bot able to keep my collection in such a state that I am able to revert my filters or to refresh the view with the new collection.
  Can you please help me to understand where my problem is? And what should I do?</p>
  
  <pre><code>&lt;script&gt;
  // model
  var HotelModel = Backbone.Model.extend({});
  
  // model view
  var ItemView = Backbone.View.extend({
      tagName : 'div',
      className : 'col-sm-4 col-lg-4 col-md-4',
      template : _.template($('#hotelItemTemplate').html()),
  
      initialize : function() {
          this.model.bind('change', this.render, this);
          this.model.bind('remove', this.remove, this);
      },
  
      render : function() {
          this.$el.html(this.template(this.model.toJSON()));
          return this;
      }
  });
  
  //view list
  var HotelListView = Backbone.View.extend({
      el : '#paginated-content',
  
      events : {
          "scroll" : "fetch"
      },
  
      initialize : function(options) {
          var items = this.collection;
          items.on('add', this.add, this);
          items.on('all', this.render, this);         
      },
  
      add : function(item) {
          var view = new ItemView({
              model : item
          });
          $('#paginated-content').append(view.render().el);
      },
  
      fetch : function() {
          this.collection.getNextPage();
      }
  });
  
  // filterign menu
  var FilteringView = Backbone.View.extend({
      el : '#filtering',
  
      // just examples of one of the filters that user can pick
      events : {
          'click #price_less_100 ' : 'updateValue',
          'click #five_stars ' : 'updateStars',
      },
  
      template : _.template($('#filteringTemplate').html()),
  
      initialize : function() {
          this.collection.on('reset', this.render, this);
          this.collection.on('sync', this.render, this);
      },
  
      render : function() {
          this.$el.html(this.template);
          return this;
      },
  
      updateValue : function(e) {
  
          //this is something I'm not using at the moment but that it contains a copy of the collection with the filters
          var filtered = new FilteredCollection(coursesPaginated);
  
          // if is checked
          if (e.currentTarget.checked) {
              var max = 100;
  
              var filtered2 = _.filter(this.collection.models, function(item) {
              return item.get("price") &lt; max;
              });
  
              //not used at the moment
              //filtered.filterBy('price', function(item) {
              //  return item.get('price') &lt; 100;
              //});
  
              //this does not work
              //this.collection.reset(filtered2);
  
              //so I do this
              this.collection.set(filtered2);
  
          } else{
                // here, i would like to have something to put the collection in a state before this filter was applied           
  
            //something that I do not use at the moment
            //filtered.removeFilter('price');
          }
  
      },
      updateStars : function(e) {
         //do something later
      }
  });
  
  // collection
  var HotelCollection = Backbone.PageableCollection.extend({
      model : HotelModel,
  
      // Enable infinite paging
      mode : "server",
  
      url : '{{url("/api/hotels")}}',
  
      // Initial pagination states
      state : {
          pageSize : 15,
          sortKey : "updated",
          order : 1
      },
  
      // You can remap the query parameters from `state` keys from
      // the default to those your server supports
      queryParams : {
          totalPages : null,
          totalRecords : null,
          sortKey : "sort"
      },
  
      parse : function(response) {
          $('#hotels-area').spin(false);
           this.totalRecords = response.total;
           this.totalPages = Math.ceil(response.total / this.perPage);
          return response.data;
      }
  });
  
  $(function() {
      hotelsPaginated = new HotelCollection();
  
      var c = new HotelListView({
          collection : hotelsPaginated
      });
  
  
      $("#paginated-content").append(c.render().el);
      hotelsPaginated.fetch();
  }); 
  </code></pre>
  
  <p></p>
  
  <p>It seems to me that it is not so easy to do filtering like this using backbone. If someone has other suggestion,please do.</p>
  
  <p>Thank you!</p>