Question

I’m building some JS to access Google places JS API using backbone. So far I’m really stuck with the model bindings.

I overrode ‘fetch’ to be able to use the Google API. The call to Google works just fine.

var Places = Backbone.Collection.extend({
    model: Place,

    fetch: function(options) {
        // SNIPPET //

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

        // SNIPPET //
    },

    parse: function(response){
        // nerver  called
    },

    googlePlaceCallback: function(results, status) {
        // I do something here and is properly called after Google returns a response
    }

});

I also defined a very simple View:

var MapView = Backbone.View.extend({

    initialize: function() {
        this.model = new Places();
        this.model.bind("reset", this.render, this);
        this.model.fetch();
    },

    render : function () {
        console.log( this.model.toJSON() );
    }

});

I can’t figure out how to populate the ‘model’. Google returns the expected results, but I can set them to the backbone model. I there something I need to do in ‘googlePlaceCallback’? I’ll probably will need to override ‘parse’ also since Google results are not quite all interesting.

Answer 1

Assuming that results is a collection of the results you want, you should be able to implement the callback as follows:

googlePlaceCallback: function(results, status) {
    this.add(results);
}

Since Places is a backbone Collection, you’re just calling the following method in the above code: http://backbonejs.org/#Collection-add

You will also have to get the correct this reference inside the googlePlaceCallback function (you want this to be the Collection). One way to do that is to use Underscores bindAll method ( http://underscorejs.org/#bindAll ), which you can use to make sure all methods in the Backbone class have a this context of the Collection itself. You can do this on initialize as follows:

initialize: function() {
    _.bindAll(this);
}

Also, the reason parse is not being called is because you are overriding fetch, and fetch calls parse. If you take a look at the annotated backbone code, you will be able to see the method call: http://backbonejs.org/docs/backbone.html