Question

I am thinking about developing a backbone application, but I am not sure if I am thinking about it the right way.

This will be my first backbone application. Basically, I want to develop a simple app that will have a google map as its “main” view.

The idea is to fetch location information from an API into a model, let’s say Marker, and these markers will be shown on the map.

I am not sure how to connect the markers to the map view:

1. Should the map view have an addMarker() function?
2. Or should the marker’s render method add the marker to the map?

Answer 1

How about creating a Collection of markers and passing it to the initialize function in your view?

This would allow you to bind the change event to update the map whenever the marker collection changes. Then, whenever you add a marker to the collection, the map view will catch the change in the collection and be able to add the marker and adapt itself as needed to accomodate.

For instance, create a view on these lines:

// in Backbone.View
initialize: function (opts) {
  _.bindAll(this);
  this.markers = opts.markers;
  this.markers.on('change', this.render);
},

render: function () {
  // create or update the map
}

When you want to initialize the view, you could now use something like this:

var markers = new MyApp.MarkerCollection(),
    view = new MyApp.MapView({ markers: markers });