Trouble with 'this' in Backbone View

Question

So I have a backbone view for a google map.

'use strict';

var MapView = Backbone.View.extend({
  id: 'map-container',

  initialize: function() {
    this.model.set('map', new google.maps.Map(this.el, this.model.get('mapOptions')));
    this.render();
    this.map = this.model.get('map');

    this.poly = new google.maps.Polyline({
      strokeColor: '#000000',
      strokeOpacity: 1.0,
      strokeWeight: 3
    });
    this.poly.setMap(this.map);

    this.map.addListener('click', this.addLatLng);
  },

  render: function() {
    $('#map-container').replaceWith(this.el);
    return this;
  },

  addLatLng: function(event) {
    var path = this.poly.getPath();

    path.push(event.latLng);

    var marker = new google.maps.Marker({
      position: event.latLng,
      title: '#' + path.getLength(),
      map: this.map
    });
  }
});

My problem is in the addLatLng function. this.poly is undefined and I think it is because of where addLatLng is being called? But i'm not super sure. Is there a way that this.poly and this.map can be defined in addLatLng?

score 2 · Answer 1 · answered Oct 01 '15 at 23:32

2

You want to make sure the method is being called in the right context. In javascript what defines this is how you invoke the function, not how you define it.

This will do the trick:

this.map.addListener('click', this.addLatLng.bind(this));

answered Oct 01 '15 at 23:32

u.k

3,091
1
20
23

score 2 · Accepted Answer · answered Oct 01 '15 at 23:35

this.map.addListener('click', this.addLatLng); is your problem. You are registering it to run a specific function, but that function won't be bound to any context when it runs. You can use the Underscore bind function to ensure the function runs in the current context:

var boundAddLatLong = _.bind(this.addLatLong, this);
this.map.addListener('click', boundAddLatLong);

If you were using some of the Backbone.Events functionality (on, listenTo, etc), it provides ways to provide the context that the function should run in. But whatever this.map is does not appear to do so.

Trouble with 'this' in Backbone View

2 Answers2