title: How to filter Backbone.js Collection and Rerender App View?
body: <p>Is is a total Backbone.js noob question. I am working off of the ToDo Backbone.js example trying to build out a fairly simple single app interface. While the todo project is more about user input, this app is more about filtering the data based on the user options (click events).</p>
  
  <p>I am completely new to Backbone.js and Mongoose and have been unable to find a good example of what I am trying to do. I have been able to get my api to pull the data from the MongoDB collection and drop it into the Backbone.js collection which renders it in the app. What I cannot for the life of me figure out how to do is filter that data and re-render the app view. I am trying to filter by the "type" field in the document.</p>
  
  <p>Here is my script:</p>
  
  <p>(I am totally aware of some major refactoring needed, I am just rapid prototyping a concept.)</p>
  
  <pre><code>$(function() {
  
      window.Job = Backbone.Model.extend({
          idAttribute: "_id",
  
          defaults: function() {
              return {
                  attachments: false
              }
          }
      });
  
      window.JobsList = Backbone.Collection.extend({
          model: Job,
          url: '/api/jobs',
          leads: function() {
              return this.filter(function(job){ return job.get('type') == "Lead"; });
          }
      });
  
      window.Jobs = new JobsList;
  
      window.JobView = Backbone.View.extend({
          tagName: "div",
          className: "item",
          template: _.template($('#item-template').html()),
          initialize: function() {
              this.model.bind('change', this.render, this);
              this.model.bind('destroy', this.remove, this);
          },
          render: function() {
              $(this.el).html(this.template(this.model.toJSON()));
              this.setText();
              return this;
          },
          setText: function() {
              var month=new Array();
              month[0]="Jan";
              month[1]="Feb";
              month[2]="Mar";
              month[3]="Apr";
              month[4]="May";
              month[5]="Jun";
              month[6]="Jul";
              month[7]="Aug";
              month[8]="Sep";
              month[9]="Oct";
              month[10]="Nov";
              month[11]="Dec";
  
              var title = this.model.get('title');
              var description = this.model.get('description');
              var datemonth = this.model.get('datem');
              var dateday = this.model.get('dated');
              var jobtype = this.model.get('type');
              var jobstatus = this.model.get('status');
              var amount = this.model.get('amount');
              var paymentstatus = this.model.get('paymentstatus')
  
              var type = this.$('.status .jobtype');
              var status = this.$('.status .jobstatus');
  
              this.$('.title a').text(title);
              this.$('.description').text(description);
              this.$('.date .month').text(month[datemonth]);
              this.$('.date .day').text(dateday);
              type.text(jobtype);
              status.text(jobstatus);
  
              if(amount &gt; 0)
                  this.$('.paymentamount').text(amount)
  
              if(paymentstatus)
                  this.$('.paymentstatus').text(paymentstatus)
  
              if(jobstatus === 'New') {
                  status.addClass('new');
              } else if (jobstatus === 'Past Due') {
                  status.addClass('pastdue')
              };
  
              if(jobtype === 'Lead') {
                  type.addClass('lead');
              } else if (jobtype === '') {
                  type.addClass('');
              };
          },
          remove: function() {
              $(this.el).remove();
          },
          clear: function() {
              this.model.destroy();
          }
      });
  
      window.AppView = Backbone.View.extend({
          el: $("#main"),
          events: {
              "click #leads .highlight" : "filterLeads"
          },
          initialize: function() {
              Jobs.bind('add', this.addOne, this);
              Jobs.bind('reset', this.addAll, this);
              Jobs.bind('all', this.render, this);
  
              Jobs.fetch();
          },
          addOne: function(job) {
              var view = new JobView({model: job});
              this.$("#activitystream").append(view.render().el);
          },
          addAll: function() {
              Jobs.each(this.addOne);
          },
          filterLeads: function() {
              // left here, this event fires but i need to figure out how to filter the activity list.
          }
      });
  
      window.App = new AppView;
  
  });
  </code></pre>