访问谷歌地图事件中的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();
});

当你需要别人指定的this（即你不能使用绑定函数）和你自己选择的this时，这是一个非常标准的技巧。

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