Question

I am building a simple mapping application that shows routes from each airport, which includes the following models:

• Airport (code, like JFK, lat/lng and city name)
• Route (ex: JFK to SFO, LGA to YYZ, etc.)

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:

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("<div>hi</div>");
        return this;
    }
});

I see that the routes collection does get initialized, but Where would I loop through it and render the corresponding RouteView for each route?

Answer 1

The logical place is after fetching the Routes data from the server.

You have two options:

• Have a RoutesView, one view that shows the entire Routes collection.
• Have a RouteView for each element in the Routes collection

The first is more efficient, especially if you have many routes in your collection. And it is good to use if you load the collection of routes, display it, and then on a new search you load another collection and display it.

The second approach is more useful if, after displaying the collection, the user can interact with it. Then on each view instance, you can have an event listener (ex for click or mouseover events), while in the ‘one view’ approach you get only one global listener and you have to figure out on which of the Routes it happened.