coffeescript和流星变量范围问题

Question

i'm using coffeescript with meteor and i think i'm having a problem with scoping.

my app draws a floorplan and i'm trying to overlay a heatmap on top of it (using h337).

@heatmap = null

initHeatMap = ( layer_name ) ->
  console.log 'creating heatmap on %s', layer_name
  h337.create
    container: document.querySelector layer_name
    gradient: 
      0.2: 'green'
      0.5: 'orange'
      0.8: 'red'
    radius: 11
    maxOpacity: 1.0
    minOpacity: 0.6
    blur: 0.6

drawHeatMap = ( metric ) ->
  @heatmap.setData
    max: 50
    min: 0
    data: regenData metric

redraw = ( metric ) ->
  console.log 'redraw: %o', @heatmap
  drawHeatMap metric 

Template.sensor_list.rendered = () ->
  @heatmap = initHeatMap '.heatmap'
  console.log 'created map: %o', @heatmap
  redraw 'temp'

basically, what i see from the chrome developer tools console is:

creating heatmap on .heatmap
created map: Heatmap
redraw: null

why is redraw() claiming that @heatmap is still null ?

Answer 1

coffeescript.org states that:

• As a shortcut for this.property, you can use @property.

Assuming this in coffeescript is like this in javascript, this is the function context, and will be different for each function. You never actually set the variable you created in global scope as it was always masked by the function context represented by the this object.

Try changing @heatmap (everywhere) to heatmap and see if that resolves it.