Example responses

categories.json

{
  "categories" : [
    {
      "id": "temperature",
      "name":"Temperature"
    },
    {
      "id" : "nutrients",
      "name" : "Nutrients"
    },
    {
      "id":"Currents",
      "name":"Currents"
    }
  ]
}

CategoryItemView.js

TOCView ->
  subviews : []
  stationCollection,
  categoryCollection

add: function(subview) { // CategoryItemView
  subview.render(); // --> <li> {{ name }} <ul></ul> </li>
  this.subviews.push(subview);
  this.$el.find('ul').append(subview.el);
}

render: function() {
  var self = this;
  this.$el.html(this.template()); // <ul class="fancy-toc"> <li> Search box would potentially go here </li> </ul>
  this.categoryCollection.each(function(category) {

    // Get a new collection of only the stations for this category
    //--------------------------------------------------------------------------------
    var relevantCollection = new StationCollection();
    var relevantStations = self.stationCollection.filter(function(item) {
      if(category in item.get('categories')) {
        return true;
      }
      return false;
    });
    // now I have a collection of only the stations for this category
    relevantCollection.reset(relevantStations);  // takes an empty collection and instatinates with a list of models
    //--------------------------------------------------------------------------------


    var subview = new CategoryView({
      model: category,
      collection: relevantCollection
    });
    this.add(subview);
  }
}


CategoryItemView ->
  tagName: "li"
  className: "special-sauce"
  subviews: []

add: function(subview) {
  subview.render(); // --> <li> Station Name </li>
  this.subviews.push(subview);
  this.$el.find('ul').append(subview.el);
}

render: function() {
  this.$el.html(this.template({collection: this.collection})); // 
  this.collection.each(function(model) {
    var subview = new StationItemView({
      model: model
    });
    this.add(subview);
  }
}


StationItemView ->
  tagName: "li"

render: function() {
  this.$el.html(this.template({ model: this.model }));
}


var stations = {
  "stations" : [
    {
      "id":"tollsps",
      "categories" : ["temperature", "nutrients"],
      "lat": 40,
      "lon": -80
    }
  ]
}

stations.json

{
  "stations" : [
    {
      "id":"tollsps",
      "cateogories" : ["temperature", "nutrients"],
      "lat": 40,
      "lon": -80
    }
  ]
}