Question

I’m implementing a system that require access to Google Places JS API. I’ve been using rails for most of the project, but now I want to inject a bit of AJAX in one of my views. Basically it is a view that displays places near your location. For this, I’m using the JS API of Google places. A quick workflow would be:

1- The user inputs a text query and hits enter.
2- There is an AJAX call to request data from Google Places API.
3- The successful result is presented to the user.

The problem is primarily in step 2. I want to use backbone for this but when I create a backbone model, it requests to the ‘rootURL’. This wouldn’t be a problem if the requests to Places was done from the server but it is not.

A place call is done like this:

service = new google.maps.places.PlacesService(map);
service.nearbySearch(request, callback);

Passing a callback function:

function callback(results, status) {
  if (status == google.maps.places.PlacesServiceStatus.OK) {
    for (var i = 0; i < results.length; i++) {
      var place = results[i];
      createMarker(results[i]);
    }
  }
}

Is it possible to override the ‘fetch’ method in backbone model and populate the model with the successful Places result? Is this a bad idea?

Answer 1

It is possible to override the fetch method of your backbone model.

var mapModel = Backbone.Model.extend({
    fetch: function (options) {
        // do your call to google places here
    },
    callBackFunctionForGoogleMaps: function (results, status) {
        // call back function here would set model properties
    }
});
return mapModel;

This way you override fetch and remove the defaults behavior of Backbone to make an ajax call.

Just as an FYI if you want to override Backbone models fetch but still have the default behavior of model.fetch you can do the following. Note the return calling Backbone.Model.fetch.

var mapModel = Backbone.Model.extend({
    fetch: function (options) {
        // do any pre-fetch actions here
        return Backbone.Model.fetch.call(options);
    }
});
return mapModel;

It is probably not a bad idea to override the fetch method here because you are still fetching data for your model, just not through ajax calls on your end. It would be smart though to leave comments noting that you are overriding fetch in this manner for a reason.