Question

所以我有谷歌地图的骨干视图。

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

我的问题出在addLatLng函数中。 this.poly未定义，我认为这是因为调用addLatLng的位置？但我不是很确定。有没有办法在addLatLng中定义this.poly和this.map？

Answer 1

您希望确保在正确的上下文中调用该方法。在javascript中，定义this的是how you invoke the function, not how you define it。

这样可以解决问题：

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

Answer 2

this.map.addListener('click', this.addLatLng);是你的问题。您正在注册它以运行特定的功能，但该功能在运行时不会被绑定到任何上下文。您可以使用Underscore bind函数来确保函数在当前上下文中运行：

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

如果您正在使用某些Backbone.Events功能（on，listenTo等），它会提供一些方法来提供函数应该运行的上下文。但无论{{{ 1}}似乎没有这样做。

麻烦的是这个＆＃39;在Backbone View中

2 个答案: