1

Googleマップ内のGoogleInfobubble内のクリックからイベントをトリガーしようとしています。

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」に設定しました。infobubbleのdivはマップdiv内にあります。

基本的に、私が最終的に必要とするのは、情報バブル内のボタンをクリックしたときに発生するイベントだけです。これは、Backboneが後で読み込まれるために情報バブルが表示されないため、自分自身をアタッチできないためだと思いますか？

4

1 に答える 1

0

デフォルトでは、バックボーン ビューのイベントは、イベント委任elを使用してルートにバインドされます。その後、イベントを「失った」に切り替えているということです。el

試すことができるのは、 delegateEventsメソッドを使用してイベントを再委任することです。

補足として、キャッシュしていることがわかりますが、代わりに$el$(this.el)を使用できるようになったため、これは不要になりました (backbone.js 0.9.2 の時点で考えています)。

于 2012-10-10T13:44:24.313 に答える