Backbone.js的与谷歌地图 - 问题，这和听众 [英] Backbone.js with Google Maps - problems with this and listeners

问题描述

我有我对谷歌地图V3，我试图转换成一个Backbone.js的视图构造函数创建一个模块。

I have a module I created for Google Maps v3 that I'm trying to convert into a Backbone.js view constructor.

下面是我的看法模块到目前为止：我会解释我的code后有问题：

Here's my view module so far: I'll explain the problems I'm having after the code:

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

});

我遇到的问题是与谷歌地图事件侦听器和如何本进行处理。

The problem I'm having is with the Google Maps event listeners and how "this" is handled.

我本来不具备dragMarker和dragMap方法，而是这两个在初始化块：

I originally didn't have the dragMarker and dragMap methods and instead these two in the 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);
});

我与此第一种方法所遇到的问题是，这那些匿名函数内称为this.map分别this.marker和。与第一种方法的问题是，在第一个听众，我没有提到this.map的方式，因此不能执行的哑剧（）。随着第二个听众，我没有办法提到this.marker，因此不能recenter周围使用标记的setPosition两种地图（）。

The problem I encountered with this first approach is that "this" inside those anonymous functions referred to "this.marker" and "this.map" respectively. The problem with this first approach was that in the first listener, I had no way of referring to "this.map" and therefore could not perform a panTo(). With the second listener, I had no way of referring to "this.marker" and therefore could not recenter the the map around that marker using setPosition().

然后我以为我可以拉出匿名函数的听众和他们申报的视图，然后，我会执行_.bindAll（这一点，dragMarker，dragMap）的方法;

I then thought that I could pull out the anonymous functions in the listeners and declare them as methods of the view, which I would then perform a _.bindAll(this, "dragMarker", "dragMap");

这种方法的问题是，我当时不得不写在像这样的情况下块听众：

The problem with this approach is that I then had to write the listeners in the event block like so:

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

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

这意味着，当我打电话与newmap =新pg.views.CreateMap构造函数;该this.dragMarker（）和this.dragMap（）立即评估，而不是在触发dragend事件被评价为回调。

This meant that when I called the constructor with newmap = new pg.views.CreateMap; that the "this.dragMarker()" and "this.dragMap()" were evaluated immediately instead of being evaluated as a callback when the "dragend" event is triggered.

我想，然后没问题的包裹起来匿名函数，像这样：

No problem I thought and then wrapped those up in anonymous functions like so:

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

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

不幸的是，这也让我想起了这个，在this.dragMarker不再指我构造的父对象较早的问题，而是指this.marker了。与第二监听器时，会出​​现同样的问题。

Unfortunately this also brings me back to an earlier problem that the "this" in "this.dragMarker" no longer refers to the parent object I constructed, but instead refer to "this.marker" again. The same problem occurs with the second listener.

我在这里完全卡住。人有我如何解决这个任何想法？

I'm completely stuck here. Anyone have any ideas on how I solve this?

推荐答案

以呼吁 dragend 匿名函数和显式绑定。

Take the anonymous functions called on dragend and bind explicitly.

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

本办法这个将永远被捆绑到CreateMap即使叫断章取义。

This way this will always be tied to CreateMap even if called out of context.

这篇关于Backbone.js的与谷歌地图 - 问题，这和听众的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！