Backbone.js mit Google Maps - Probleme mit diesem und Hörer

Question

Ich habe ein Modul I für Google Maps v3 erstellt, dass ich die Umwandlung in einen Backbone.js Ansicht Konstruktor bin versucht.

Hier ist meine Ansicht Modul so weit: Ich werde die Probleme erklären ich nach dem Code habe:

pg.views.CreateMap = Backbone.View.extend({

  tagName:  "div",
  className: "map",

  events: {},

  latitude:   "-23.56432",
  longitude:  "-46.65183", 

  initialize: function() {
    _.bindAll(this, 'render', 'dragMarker', 'dragMap');

    this.latlng = new google.maps.LatLng(this.latitude, this.longitude);
    var myOptions = {
      zoom: 16,
      center: this.latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    this.map = new google.maps.Map($(this.el)[0], myOptions);
    this.marker = new google.maps.Marker({
      map: this.map,
      position: this.latlng, 
      draggable: true
    });

    google.maps.event.addListener(this.marker, "dragend", this.dragMarker());

    google.maps.event.addListener(this.map, "dragend", this.dragMap());

  },

  render: function() {
    return this;
  },

  dragMarker: function() {
    this.latlng = this.marker.getPosition();
    this.map.panTo(this.latlng);
  },

  dragMap: function() {
    this.latlng = this.map.getCenter();
    this.marker.setPosition(this.latlng);
  }

});

Das Problem, das ich habe, ist mit dem Google Maps-Ereignis-Listener und wie „der“ behandelt wird.

Ich habe ursprünglich nicht die dragMarker und dragMap Methoden haben und stattdessen diese beiden in der initialize Block:

google.maps.event.addListener(this.marker, "dragend", function() {
  this.latlng = this.marker.getPosition();
  this.map.panTo(this.latlng);
});

google.maps.event.addListener(this.map, "dragend", function() {
  this.latlng = this.map.getCenter();
  this.marker.setPosition(this.latlng);
});

Das Problem, das ich mit diesem ersten Ansatz begegnet, ist, dass „dies“ innerhalb dieser anonymen Funktionen bezeichnet „this.marker“ und „this.map“ bezeichnet. Das Problem bei diesem ersten Ansatz war, dass in dem ersten Hörer, ich auf dem Abschnitt „this.map“ keine Möglichkeit hatte und daher nicht eine panTo führen könnte (). Mit dem zweiten Hörer, ich hatte keine Möglichkeit, auf den Abschnitt „this.marker“ und deshalb nicht die durch die Karte neu zentrieren konnte um diesen Marker setPosition () verwenden.

ich dann dachte, dass ich die anonyme Funktionen in den Hörer herausziehen konnte und sie als Methoden der Ansicht erklären, was ich dann eine _.bindAll führen würde (das „dragMarker“, „dragMap“);

Das Problem bei diesem Ansatz ist, dass ich dann die Zuhörer im Ereignisblock schreiben musste etwa so:

google.maps.event.addListener(this.marker, "dragend", this.dragMarker());

google.maps.event.addListener(this.map, "dragend", this.dragMap());

Das bedeutet, dass, wenn ich den Konstruktor mit newmap = new pg.views.CreateMap genannt; dass die „this.dragMarker ()“ und „this.dragMap ()“ wurde als Rückruf sofort statt ausgewertet ausgewertet, wenn das „dragend“ Ereignis ausgelöst wird.

Kein Problem dachte ich, und dann diejenigen nach oben in anonymen Funktionen eingewickelt wie folgt:

google.maps.event.addListener(this.marker, "dragend", function() {
  this.dragMarker();
});

google.maps.event.addListener(this.map, "dragend", function() {
  this.dragMap();
});

Leider auch das bringt mich zu einem früheren Problem zurück, dass die „this“ in „this.dragMarker“ bezieht sich nicht mehr auf das übergeordnete Objekt, das ich gebaut, sondern beziehen sich auf „this.marker“ wieder. Das gleiche Problem tritt mit dem zweiten Hörer.

Ich bin stecken hier völlig. Wer irgendwelche Ideen, wie ich dieses Problem lösen?

Answer 1

Nehmen Sie die anonymen Funktionen aufgerufen dragend und bindet explizit.

_.bindAll(this, 'dragMarker', 'dragMap');
google.maps.event.addListener(this.marker, "dragend", this.dragMarker);
/* etc ... */

Auf diese Weise this wird immer auf CreateMap gebunden werden, auch wenn der Kontext angezeigt wird.

Answer 2

Ich löste dieses Problem, indem mit dem der / Selbst Hack gemeinsam in Javascript.

var self = this;

google.maps.event.addListener(this.marker, "dragend", function() {
  self.latlng = this.getPosition();
  self.map.panTo(self.latlng);
});

google.maps.event.addListener(this.map, "dragend", function() {
  self.latlng = this.getCenter();
  self.marker.setPosition(self.latlng);
});

Wenn jemand eine Lösung hat, die nicht diesen Hack erfordert, bin ich ganz Ohr.