谷歌地圖事件訪問Backbone.View功能

Question

所以我有一個谷歌地圖事件監聽器，我想在事件監聽器內的視圖上調用一個函數。點擊標記時，我不斷收到未定義的錯誤。有任何想法嗎？ 這裏是所有的代碼：

APP = {}; 

APP.ArtPiece = Backbone.Model.extend({ 
    defaults: { 
     first_name: 'First Name not provided', 
     title: 'Title not provided', 
     location: 'Location not provided', 
     description: 'Description not provided', 
     last_name: 'Last Name not provided', 
     longitude: null, 
     latitude: null, 
     type: 'Type not provided', 
     medium: 'Medium not provided' 
    }, 
    initialize: function() { 
     this.address(); 
    }, 
    address: function() { 
     geocoder = new google.maps.Geocoder(); 
     console.log('In initialize'); 
     var latlng = new google.maps.LatLng(this.get('latitude'), this.get('longitude')); 

     geocoder.geocode({'latLng': latlng}, function(results, status) { 
      if (status == google.maps.GeocoderStatus.OK) { 
       if (results[1]) { 
       console.log(results[1].formatted_address); 
       return results[1].formatted_address; 
       } else { 
       console.log(status); 
       return 'No address available'; 
       } 
      } else { 
       console.log(status); 
       return 'No Address Provided. Google screwed us!'; 
      } 
     }); 
    } 
}); 

APP.ArtPieces = Backbone.Collection.extend({ 
    model: APP.ArtPiece, 
    url: 'https://data.nashville.gov/resource/dqkw-tj5j.json' 
}); 

APP.artPieces = new APP.ArtPieces(); 

APP.Map = Backbone.Model.extend({ 
    defaults: { 
     center: new google.maps.LatLng(36.159480, -86.792112), 
     zoom: 12, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    } 
}); 

APP.map = new APP.Map(); 

APP.MapView = Backbone.View.extend({ 
    el: '#map', 
    initialize: function() { 
     this.collection.fetch({ reset: true }); 
     this.listenTo(this.collection, 'reset', this.render); 
     this.map = new google.maps.Map(this.el, this.model.toJSON()); 
    }, 
    render: function() { 
     var infoWindows = []; 

     this.collection.each(function (artPiece) { 

      var marker = new google.maps.Marker({ 
       map: this.map, 
       position: new google.maps.LatLng(
        artPiece.get('latitude'), 
        artPiece.get('longitude') 
       ), 
       title: artPiece.get('title'), 
       markerId: artPiece.cid 
      }); 

      var info = '<div class="info-window">' + 
         '<p class="artist"><strong>Artist: </strong>' + artPiece.get('first_name') + ' '+ artPiece.get('last_name') + '</p>' + 
         '<p class="type"><strong>Type: </strong>' + artPiece.get('type') + '</p>' + 
         '<p class="medium"><strong>Medium: </strong>' + artPiece.get('medium') + '</p>' + 
         '<p class="description"><strong>Description: </strong>' + artPiece.get('description') + '</p>' + 
         '<p class="location"><strong>Location: </strong>' + artPiece.get('location') + '</p>' + 
         '<p class="address"><strong>Address: </strong>' + artPiece.get('address') + '</p>' + 
         '</div>'; 

      var infowindow = new google.maps.InfoWindow({ 
       content: info 
      }); 

      infoWindows[infoWindows.length] = infowindow; 

      google.maps.event.addListener(marker, 'click', function() { 
       this.map.setZoom(14); 
       this.map.setCenter(marker.position); 
       for(i = 0;i<infoWindows.length; i++) { infoWindows[i].close(); } 
       infowindow.open(this.map,marker); 
       displayInformation(); //I want this to fire 
      }); 
     }, this); 
     $('#map').replaceWith(this.el); 
     google.maps.event.addDomListener(window, 'load', initialize); 
    }, 
    displayInformation: function() { 
     //Do something 
    } 
}); 

APP.mapView = new APP.MapView({ 
    model: APP.map, 
    collection: APP.artPieces 
}); 

})(); 

而在這一觀點的底部我在那裏，我想要的功能，以火評論：

render: function() { 
    var infoWindows = []; 

    this.collection.each(function (artPiece) { 

     var marker = new google.maps.Marker({ 
      map: this.map, 
      position: new google.maps.LatLng(
       artPiece.get('latitude'), 
       artPiece.get('longitude') 
      ), 
      title: artPiece.get('title'), 
      markerId: artPiece.cid 
     }); 

     var info = '<div class="info-window">' + 
        '<p class="artist"><strong>Artist: </strong>' + artPiece.get('first_name') + ' '+ artPiece.get('last_name') + '</p>' + 
        '<p class="type"><strong>Type: </strong>' + artPiece.get('type') + '</p>' + 
        '<p class="medium"><strong>Medium: </strong>' + artPiece.get('medium') + '</p>' + 
        '<p class="description"><strong>Description: </strong>' + artPiece.get('description') + '</p>' + 
        '<p class="location"><strong>Location: </strong>' + artPiece.get('location') + '</p>' + 
        '<p class="address"><strong>Address: </strong>' + artPiece.get('address') + '</p>' + 
        '</div>'; 

     var infowindow = new google.maps.InfoWindow({ 
      content: info 
     }); 

     infoWindows[infoWindows.length] = infowindow; 

     google.maps.event.addListener(marker, 'click', function() { 
      this.map.setZoom(14); 
      this.map.setCenter(marker.position); 
      for(i = 0;i<infoWindows.length; i++) { infoWindows[i].close(); } 
      infowindow.open(this.map,marker); 
      displayInformation(); //I want this to fire 
     }); 
    }, this); 
    $('#map').replaceWith(this.el); 
    google.maps.event.addDomListener(window, 'load', initialize); 
}, 
displayInformation: function() { 
    //Do something 
} 

Answer 1

大概是最容易做的事情就是藏匿在一個局部變量，然後查看通話displayInformation上：

var mapView = this; 
google.maps.event.addListener(marker, 'click', function() { 
    this.map.setZoom(14); 
    this.map.setCenter(marker.position); 
    for(i = 0;i<infoWindows.length; i++) { infoWindows[i].close(); } 
    infowindow.open(this.map,marker); 
    mapView.displayInformation(); 
}); 

這是一個非常標準的伎倆，當你需要的是SOM的this其他人指定（即你不能使用綁定函數）和你自己選擇的this。

演示：https://jsfiddle.net/ambiguous/jg58het3/