Backbone.js need help connecting view events with other views - backbone.js

Question

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.
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.
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.
see it here: DEMO SITE
The Main content area is made up of "car incentive" like this.
//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);
}
});
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?
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?
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.
// ======================================
// 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);
}
});
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.
json object

Answer 1

What a question! Actually many questions in one!
I can tell you the logic I'm using to perform exactly the same task, and which actually works (see here)
You basically must have 2 collections: a collection of facets, and a collection of items.
Collection of facets
At the beginning it is empty (no facets selected). When you check one, then you add it to the facet collection. When adding a facet, you filter the collection of items in some way (you can trigger an event listend by the collection of items or - better - just call a method like itemCollection.facet_filter() where facet_filter() is a method defined by you in the item collection object).
Good.
Collection of item
It's an ordinary collection. You just add a facet_filter() method which filters the list and trigger a reset event. This reset event is listened by FacetsView which re-renders the list.
the facet_filter()method should be something like this.
filter_results: function(facets){
var filteredColletion= new Backbone.Collection(this.models);
_.each(facets,function(facet){
filteredColletion.where({facet.key: facet.value});
});
this.reset(returnList);
}
}
This is the logic I use and it works.