title: Backbone.js need help connecting view events with other views
body: <p>I'm building a simple app that implements a "faceting" or "filtering" interface -- no data writing. I want users to select facets (checkboxes) on the left to reduce the result set on the right. </p>
  
  <p>I've got 2 separate collections (facets and incentive). These are being populated from a single json object that contains an array comprised of 2 items. Each 2 items help create the model, view, and collection for these two parts of the page.  </p>
  
  <p>I need to get events in the facet view to update the result of the incentives collection. What's the best way to connect these two together. My test app can be found here. I am using Handlebars for templating.</p>
  
  <p>see it here: <a href="http://www.rsturim.com/test/" rel="nofollow">DEMO SITE</a></p>
  
  <p>The Main content area is made up of "car incentive" like this.</p>
  
  <pre><code>//define Incentive model
  var Incentive = Backbone.Model.extend({
      defaults: {
          photo: "car.png"
      }
  });
  
  //define individual incentive view
  var IncentiveView = Backbone.View.extend({
      tagName: "article",
      className: "incentive-container",
      template: Handlebars.compile($("#incentive-template").html()),
  
      initialize: function() {
          this.$el.html(this.template(this.model.toJSON()));
          return this;
      }
  
  });
  
  //define Incentives collection
  var Incentives = Backbone.Collection.extend({
      model: Incentive,
      url: 'data/incentives3.json',
      parse: function(response) {
          return response.incentiveHolder;
      }
  });
  
  var IncentivesView = Backbone.View.extend({
      el: $(".incentives-container"),
  
      initialize: function() {
          this.collection = new Incentives();
  
  
          // When the contents of the collection are set, render the view.
          this.collection.on('reset', function() {
              incentives = this.collection.models;
              this.render();
          }, this);
  
          this.collection.fetch();
          this.collection.on("reset", this.render, this);
      },
  
      render: function() {
          this.$el.find("article")
              .remove();
  
          _.each(this.collection.models, function(item) {
              this.renderIncentive(item);
          }, this);
      },
  
      renderIncentive: function(item) {
          var incentiveView = new IncentiveView({
              model: item
          });
          this.$el.append(incentiveView.render()
              .el);
      }
  
  });
  </code></pre>
  
  <p>The facet model/collection is detailed below. You can see in FacetView -- I've registered a "change" event when a user selects a checkbox.  I need to some how use this data to either 1) hide each incentive that does not contain this facet value or 2) remove the model from the FacetCollection (??).  I want users to be able to quickly toggle these checkboxes on/off a bunch -- is removing/adding slower (or less efficient) then hiding/showing with css?</p>
  
  <p>Also, you can see from my displayIncentives() function that "this" -- is an instance of the view -- but how do I access the "value" of the checkbox that was just clicked?</p>
  
  <p>If I can get this value -- then I could examine the incentive collection, iterate over each item -- and ask it it's "incentive" array "contains" this value of the checkbox that was just click. If return false, I would hide (or remove?) the item and proceed.</p>
  
  <pre><code>// ======================================
  // FACETS
  // ======================================
  
  //define Facet model
  var Facet = Backbone.Model.extend({});
  
  //define individual facet view
  var FacetView = Backbone.View.extend({
      tagName: "div",
      className: "facet-group",
      template: Handlebars.compile($("#facets-template").html()),
  
      initialize: function() {
          this.$el.html(this.template(this.model.toJSON()));
          return this;
      },
  
      events: {
          "change input[type=checkbox]": "displayIncentives"
      },
  
      displayIncentives: function() {
          console.log(this);
      }
  
  });
  
  //define Facets collection
  var Facets = Backbone.Collection.extend({
      model: Facet,
      url: 'data/incentives3.json',
      parse: function(response) {
          return response.facetsHolder;
      }
  });
  
  var FacetsView = Backbone.View.extend({
      el: $(".facets-container"),
  
      initialize: function() {
          this.collection = new Facets();
  
          // When the contents of the collection are set, render the view.
          this.collection.on('reset', function() {
              this.render();
          }, this);
  
          this.collection.fetch();
      },
  
      render: function() {
          _.each(this.collection.models, function(item) {
              this.renderFacet(item);
          }, this);
      },
  
      renderFacet: function(item) {
          var facetView = new FacetView({
              model: item
          });
          this.$el.append(facetView.render().el);
      }
  
  });
  </code></pre>
  
  <p>Finally -- my json object is located here ... I have the freedom at the moment to help design how this object is structure in the next phase of this project. Any suggestions greatly appreciated.</p>
  
  <p><a href="http://www.rsturim.com/test/data/incentives3.json" rel="nofollow">json object</a></p>