如何处理实现 google.maps.OverlayView 的 Backbone 事件？答案

【问题标题】：How to handle Backbone events implementing a google.maps.OverlayView?如何处理实现 google.maps.OverlayView 的 Backbone 事件？
【发布时间】：2014-01-21 23:32:03
【问题描述】：

我的 Backbone 视图实现了 google.maps.OverlayView()。

这个视图包含一些 div 的内容，我需要处理容器 div 上的鼠标悬停/移出和单击两个包含 div 的事件。

我能够获得所需事件的唯一方法是在我看来使用google.maps.event.addDomListener。像这样的东西（复制和粘贴代码）：

var MarkerView = MasterView.extend({
    events:{
        //These events will never be fired
        'click .icon-context':function () {},
        'mouseout':function (event) {}
    },
    render:function(){
      //this renders the google.maps.OverlayView by implementing onAdd, draw, onRemove 
      var that = this;

      this.overlay.onAdd = function(){
        //Code for adding the OverLayView omitted here

        that.listeners_ = [
          google.maps.event.addDomListener(that.overlay.el, 'mouseout', function () {
            //This event should not be handled here
          }),
          google.maps.event.addDomListener($(that.overlay.el).find('.icon-context').first()[0], 'click', function () {
            //This event should not be handled here
          }),            
        ];

      };

    }
});

视图逻辑的核心部分应该是可重用的，因为我想在地图和列表中使用它来显示/处理几乎相同的内容。通过将我的视图绑定到 Google Maps 事件侦听器，我将不得不为事件处理复制大量代码。感觉不完全正确。

如果视图托管在 google.maps.OverlayView 中，我如何让视图“本地”处理事件

【问题讨论】：

视图有事件哈希events:{name:callback}通过委托绑定到根元素，所以希望它能工作
不幸的是，events:{name:callback} 不适用于我的自定义 OverlayView，因为我试图在我的代码示例中显示。还是我错过了你试图告诉我的一些实质性内容？
将视图附加到 dom 后创建叠加层？

标签： google-maps google-maps-api-3 backbone.js backbone-events

【解决方案1】：

您必须在视图上使用this.setElement($(that.overlay.el))在创建叠加层并将其添加到 HTML 之后，以便更新 EL，以便您可以使用事件哈希。

如果您实例化一个新的叠加层，您必须再次执行以使 EL 指向正确的对象。

不要忘记将它包装在一个 Jquery obj 中，这在尝试向 infoBoxes 添加事件处理程序时帮助了我很多

【讨论】：

这有多容易。现在它适用于事件哈希。非常感谢。