Javascript 带有Google Maps的Backbone.js-此和侦听器存在问题

我有一个为Google Maps v3创建的模块，我正试图将其转换为Backbone.js视图构造函数

到目前为止，这是我的视图模块：我将在代码之后解释我遇到的问题：

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);
  }

});

我遇到的问题是谷歌地图事件监听器以及如何处理“这个”

我最初没有dragMarker和dragMap方法，而是在initialize块中有这两种方法：

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);
});

我在第一种方法中遇到的问题是，这些匿名函数中的“this”分别指“this.marker”和“this.map”。第一种方法的问题是，在第一个侦听器中，我无法引用“this.map”，因此无法执行panTo（）。对于第二个侦听器，我无法引用“this.marker”，因此无法使用setPosition（）重新居中该标记周围的映射

然后我想我可以从侦听器中取出匿名函数，并将它们声明为视图的方法，然后执行一个u.bindAll（这是“dragMarker”，“dragMap”）

这种方法的问题是，我必须在事件块中编写侦听器，如下所示：

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

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

这意味着当我用newmap=new pg.views.CreateMap调用构造函数时；“this.dragMarker（）”和“this.dragMap（）”被立即求值，而不是在触发“dragend”事件时作为回调求值

没问题，我想，然后将它们封装在匿名函数中，如下所示：

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

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

不幸的是，这也让我回到了前面的一个问题，“this.dragMarker”中的“this”不再指我构造的父对象，而是再次指“this.marker”。第二个侦听器也会出现同样的问题

---

我完全被困在这里了。有人知道我如何解决这个问题吗？

我使用Javascript中常见的that/self-hack解决了这个问题

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);
});

---

如果有人有不需要这种破解的解决方案，我洗耳恭听。

使用

dragend

上调用的匿名函数并显式绑定

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

---

这样

即使在上下文之外调用此
也将始终与CreateMap绑定。
附加事件处理程序的正确方法如下-
google.maps.event.addListener（This.marker，“dragend”，This.dragMarker）（不带括号）。但这并不能解决你的上下文问题，这不是黑客行为。Dougl Crockford谈到var，它=这个；在他的YUI视频中。这几天我使用了u.bind（）方法。我发现它更干净，出错的机会也更小（比如忘记将var放在self=this前面；例如）@AndrewDeAndrade:你是如何从google.maps.event获得这个.getCenter（）的，而不是调用这个{这就是视图本身}在我看来，这比使用.bindAll方法更可取，因为它使上下文更显式。在我看来，知道我需要在别处寻找.bindAll调用会让它变得更加乏味。在dragMarker:function（）{}中，我如何从google.maps.event获得这个呢