Question

我正试图通过Google地图中的Google Infobubble内的点击触发事件。

class MapSite.Views.Maps extends Backbone.View

  events:
    'click [name=testdrive]' : 'initControls'

  initialize: ->
    @render()

  render: ->
    @el = $("#map")  
    $this = $(this.el)
    @loadMap()

  initControls: ->
    alert "hello"

  loadMap: ->
    osmMapType = new google.maps.ImageMapType(
      getTileUrl: (coord, zoom) ->
        "http://tile.openstreetmap.org/#{zoom}/#{coord.x}/#{coord.y}.png"
      tileSize: new google.maps.Size(256, 256)
      isPng: true
      alt: "OpenStreetMap layer"
      name: "OSM"
      maxZoom: 19
    )

    cloudMadeMapType = new google.maps.ImageMapType(
      getTileUrl: (coord, zoom) ->
        "http://b.tile.cloudmade.com/****/54912/256/#{zoom}/#{coord.x}/#{coord.y}.png"
      tileSize: new google.maps.Size(256, 256)
      isPng: true
      alt: "CloudMade layer"
      name: "CMade"
      maxZoom: 13
    )

    lat = 51.503
    lng = -0.113
    latlng = new google.maps.LatLng(lat, lng)
    options =
      zoom: 10
      center: latlng
      mapTypeId: 'OSM'
    @gMap = new google.maps.Map(document.getElementById("map"), options)
    @gMap.mapTypes.set('OSM', osmMapType)
    @gMap.mapTypes.set('CloudMade', cloudMadeMapType)
    @gMap.setMapTypeId('CloudMade')


    @initShape()
    @initLabel()



initLabel: ->
    console.log("This is where the label should appear")
    initLabel = new InfoBubble(
      position: new google.maps.LatLng(51.44115356738888, 0.14849636779354114)
      maxWidth: 240
      maxHeight: 210
      shadowStyle: 1
      padding: 0
      content: '<div class="tooltip_header"><h4>Hello</h4></div><div class="tooltip_content"><p>Nunc nec, egestas vel augue rhoncus massa cras, tincidunt a nisi nisi est lundium non sed? Eros pulvinar</p></div> <div id="tooltip_buttons" class="tooltip_buttons"><button class="btn btn-success" name="testdrive">Test Drive</button> <button class="btn btn-warning">Read More</button></div>',
      tabPadding: 12
      backgroundColor: 'black'
      borderRadius: 0
      arrowSize: 10
      borderWidth: 0
      borderColor: '#AB2424'
      disableAutoPan: true
      hideCloseButton: false
      arrowPosition: 0.5
      backgroundClassName: 'phoney'
      tabClassName: 'tabClass'
      activeTabClassName: 'activeTabClass'
      arrowStyle: 2
      )

    initLabel.open(@gMap)

端

地图加载很好，信息泡泡就在那里。然后我试着接受并将一个事件链接到它被点击，但它没有被触发。我已将el设置为“#map”，并且信息块的div位于地图div内。

基本上我需要最终得到的是当在信息气泡内的按钮上进行点击时会被触发的事件。我想这可能是因为Backbone没有看到信息泡泡，因为它之后被加载所以无法自我附加？

Answer 1

默认情况下，骨干视图中的事件使用事件委派绑定到根el。因为你正在切换你的el之后事件“丢失”。

您可以尝试使用delegateEvents方法 reDelegateging 您的活动。

作为一个侧面点，我看到你正在缓存$(this.el)，现在不再需要了，因为你现在可以使用$el（我认为是backbone.js 0.9.2）。< / p>

Backbone事件未触发 - Google Maps InfoBubble

1 个答案: