title: How to use subviews in backbone.js
body: <p>I am building a simple mapping application that shows routes from each airport, which includes the following models:</p>
  
  <ul>
  <li>Airport (code, like <code>JFK</code>, lat/lng and city name)</li>
  <li>Route (ex: <code>JFK to SFO</code>, <code>LGA to YYZ</code>, etc.)</li>
  </ul>
  
  <p>I am able to retrieve the routes from each airport from my backend service like so, and then render each route as a part of a list and eventually add them to the map:</p>
  
  <pre><code>RoutesView = Backbone.View.extend({
      el: $("body"),
      // template: Handlebars.compile($("#routes-template").html()),
      events: {
          "click #update": "getRoutes",
          "click #submit-button": "getRoutes"
      },
      initialize: function() {
          console.log("Initializing RoutesView");
          this.input = $("#airport-code");
          this.collection = new Routes; 
          this.collection.bind("reset", this.render, this);
          this.collection.bind("add", this.addOne, this);
          this.collection.bind('all', this.render, this);
          // this.collection.fetch({ data: jQuery.param({airport_code: this.input.val()}) });
          // this.routes = new Routes;
          // this.routes.bind('add',   this.addOne, this);
          // this.routes.bind('reset', this.addAll, this);
      },
      getRoutes: function() {
          console.log("fetching new routes getRoutes()");
  
          // this.routes.fetch({ data: jQuery.param({airport_code: this.input}) });
          this.collection.fetch({ data: jQuery.param({airport_code: this.input.val()}) });
  
      },
      addOne: function(route) {
          console.log(route);
          // console.log("adding one route...");
          var view = new RouteView({model: route});
          view.render();
      },
      render: function() {
          $("#map-container").gmap3({ action: 'addMarker', address: this.input.val(), map: {center: true, zoom: 7 }, marker:{ options:{ draggable: false  } } });
          $(".helptext").remove();
          $("#airport-headline").text("Flights from " + this.input.val());
      }
  });
  
  RouteView = Backbone.View.extend({
      tagName:  "div",
      template: Handlebars.compile($("#route-template").html()),
      events: {
          "click .more"              : "showMore",
      },
  
      showMore: function() {
          var routeid = this.model.get('id');
          console.log("Showing more info for route id #" + routeid);
          // this.model.toggle();
      },
      render: function() {
          console.log("Rendering route...");
          $("#map-container").gmap3({ action: 'addMarker', address: this.model.get("source_airport"), map: {center: true, zoom: 7 }, marker:{ options:{ draggable: false  } } });
          $("#routes").append("&lt;div&gt;hi&lt;/div&gt;");
          return this;
      }
  });
  </code></pre>
  
  <p>I see that the routes collection does get initialized, but Where would I loop through it and render the corresponding RouteView for each route?</p>