javascript - 如何从 Backbone/Coffee 中的另一个 View 函数访问我的 @map 对象？

Question

我正在尝试使用 Backbone 、coffescript 和谷歌地图 API。我能够渲染 map 并添加中心标记。我在 map 上添加位置集合作为死者时遇到问题。如何与 View 或应用程序其他部分中的其他函数共享下面的 @map 对象？

在addMarker中@map未定义。

render: ->
    $(@el).html(@template())
    primary = @collection.at(@collection.length - 1)
    if primary
      latlng = {}
      @collection.each(@appendLocation)
      latlng['latitude'] = primary.attributes.latitude;
      latlng['longitude'] = primary.attributes.longitude;
      @renderMap(latlng)
   this

  renderMap: (latlng) ->
    view = new Bone.Views.Map()
    $('#map').append(view.render().el)
    latlng = new google.maps.LatLng(latlng['latitude'], latlng['longitude'])
     myOptions =
      zoom: 12
      center: latlng
      mapTypeId: google.maps.MapTypeId.ROADMAP
     @map = new google.maps.Map(view.render().el, myOptions)
    marker = new google.maps.Marker({
      position: latlng,
      animation: google.maps.Animation.DROP,
      map: @map,
      title:"Hello World!"
    })
    @collection.each(@addMarker)

  addMarker: (location)->
    console.log(@map) <-----UNDEFINED
    latlng = new google.maps.LatLng(location.attributes.latitude, location.attributes.longitude)
    console.log location.attributes.latitude
    location_marker = new google.maps.Marker({
      position: latlng,
      animation: google.maps.Animation.DROP,
      map: @map,
      title:"Hello World!"
    })

Answer 1

我假设您的缩进问题只是复制/粘贴错误，并且您的代码实际上如下所示:

renderMap: (latlng) ->
  view = new Bone.Views.Map()
  $('#map').append(view.render().el)
  latlng = new google.maps.LatLng(latlng['latitude'], latlng['longitude'])
  myOptions =
    zoom: 12
    center: latlng
    mapTypeId: google.maps.MapTypeId.ROADMAP
  @map = new google.maps.Map(view.render().el, myOptions)
  marker = new google.maps.Marker({
    position: latlng,
    animation: google.maps.Animation.DROP,
    map: @map,
    title:"Hello World!"
  })
  @collection.each(@addMarker)

each method on a collection只是 Underscore 的 each 和 fine manual 的薄包装。关于每个有这样的说法:

each _.each(list, iterator, [context]) Alias: forEach

Iterates over a list of elements, yielding each in turn to an iterator function. The iterator is bound to the context object, if one is passed.

使用each时，您没有指定上下文:

@collection.each(@addMarker)

so @ (又名 this)将是 addMarker< 内的 window (或您环境中的任何全局上下文)/。您希望 @ 成为您的 View ，因此可以指定上下文:

@collection.each(@addMarker, @)

或将addMarker定义为bound function :

addMarker: (location) =>
  #...

您还可以使用 _.bindAll在 View 的 initialize 方法中，但这在 CoffeeScript 中很少见。