Coffeescript类的行为不符合预期

Question

Bad title name, sorry. Not really sure how to summarize this.

I'm trying to use OpenLayers map API to print a map with a number of markers to a page. I have working code, but when I try to move it into a separate Coffeescript class, it fails silently. The following code worked:

fromProjection = new OpenLayers.Projection("EPSG:4326") # Transform from WGS 1984
toProjection = new OpenLayers.Projection("EPSG:900913") # to Spherical Mercator Projection
mapnik = new OpenLayers.Layer.OSM()
markers = new OpenLayers.Layer.Markers("Markers")

map = new OpenLayers.Map("john-muir-trail-map")
markerCoordinates = -> $("\#john-muir-trail-data").data('markers').split('+')

paint = ->
  map.addLayer(mapnik)
  map.addLayer(markers)

  for pair in markerCoordinates()
    coords = pair.split(":")
    pos = new OpenLayers.LonLat(coords[1], coords[0]).transform( fromProjection, toProjection )
    markers.addMarker(new OpenLayers.Marker(pos))
    map.setCenter(pos, 8)


paint()

It relies on two divs that exist (one with the id 'john-muir-trail-map' and another with the id 'john-muir-trail-data' and some marker data). When the above code is in my main .coffee file, it works just great.

But , when I try to modularize things by moving the map code out into a separate OpenLayerMap Coffeescript class, no errors raise, but it just doesn't work. Here's what I've done. (I'm pretty sure I'm including things correctly. The class is available from my main file, as are its methods and attributes):

class OpenLayersMap

  constructor: (mapId) ->
    @mapId = mapId

  fromProjection: new OpenLayers.Projection("EPSG:4326") # Transform from WGS 1984
  toProjection: new OpenLayers.Projection("EPSG:900913") # to Spherical Mercator Projection
  mapnik: new OpenLayers.Layer.OSM()
  markers: new OpenLayers.Layer.Markers("Markers")

  map: new OpenLayers.Map("#{@mapId}-map")
  markerCoordinates: -> $("\##{@mapId}-data").data('markers').split('+')

  paint: ->
    @map.addLayer(@mapnik)
    @map.addLayer(@markers)

    for pair in @markerCoordinates()
      coords = pair.split(":")
      pos = new OpenLayers.LonLat(coords[1], coords[0]).transform( @fromProjection, @toProjection )
      @markers.addMarker(new OpenLayers.Marker(pos))
      @map.setCenter(pos, 8)

window.OpenLayersMap = OpenLayersMap

I then call it in that previous file like so:

map = new OpenLayersMap('john-muir-trail')
map.paint()

I don't think the OpenLayers details around projections, etc, are relevant. What matters is that mapId is being passed in and used correctly, and if I throw a debugger in the paint() function, the debugger is hit, and all the attributes available at that point look good to me. The class is being included correctly, etc. But , no map is being painted.

I have a Ruby background, and I think I'm confused by the effects and side-effects of the paint() function. Why would it behave differently in a different file, if it's essentially identical behavior?

Any ideas why this is failing (silently)? It's driving me a little nuts.

Answer 1

I believe your use of @ inside your map property is causing the issue. Instead of accessing the current instance of OpenLayersMap you are calling the static property mapId on OpenLayersMap . For example:

map: new OpenLayers.Map("#{@mapId}-map")

Will compile into:

OpenLayersMap.prototype.map = new OpenLayers.Map("" + OpenLayersMap.mapId + "-map");

---

You will need to make map a method to access @mapId set in the constructor.

map: -> new OpenLayers.Map("#{@mapId}-map")

Answer 2

I fully agree with Kyle Needham's explanation , but I want to propose another solution.

To fix your code simply move map assignment from class prototype to its constructor:

class OpenLayersMap
  constructor: (mapId) ->
    @mapId = mapId
    @map = new OpenLayers.Map("#{@mapId}-map")

---

You should consider moving fromProjection , toProjection , mapnik and markers definition to the constructor as well.

In your current implementation all instances of OpenLayersMap will have the same markers value, eg:

l1 = new OpenLayersMap 'l1'
l2 = new OpenLayersMap 'l2'
l1.markers is l2.markers # true, meaning they are the same object

So, by mutating l1.markers you'll not only affect all existing instances of OpenLayersMap class, but will change its prototype as well.

It means that by mutating any of this four properties in any instance of OpenLayersMap class you'll make the same change to all other instances.

If all this classes ( Projection , Layer and Markers ) are immutable (ie provide a bunch of helpers, but hold no state) then your implementation is the correct on, but I doubt that anyone would bother himself wrapping a bunch of stateless helpers into class.

So, consider changing your code to:

class OpenLayersMap
  constructor: (mapId) ->
    @mapId = mapId
    @map = new OpenLayers.Map "#{@mapId}-map"
    @fromProjection = new OpenLayers.Projection "EPSG:4326"
    @toProjection = new OpenLayers.Projection "EPSG:900913"
    @mapnik = new OpenLayers.Layer.OSM()
    @markers = new OpenLayers.Layer.Markers "Markers"

In this case each instance of OpenLayersMap will have its own fromProjection , toProjection , mapnik and markers .