In the following code the event is called at the beginning (when the page loads) 10 times, because there are 10 rectangles with an on "click" event. But the event when I really click on a rectangle does not effect anything.
Here the code (I replaced image against rect for easier handling):
width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth || 0
height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight || 0
class Gallery
constructor: (config) ->
@first_xpos = 0
@first_ypos = 0
@vertical_spacing = 20
@horizontal_spacing = 10
@current_xpos = @first_xpos
@current_ypos = @first_ypos
@current_img_in_line = 1
@max_pics_in_line = 3
@stage = new Kinetic.Stage(config)
@images_layer = new Kinetic.Layer
@message_layer = new Kinetic.Layer()
@image_width = 100
@image_height = 100
addImages: () ->
for i in [0...10]
ori = new Kinetic.Rect
x: @current_xpos
y: @current_ypos
fill: 'green'
draggable: false
width: @image_width
height: @image_height
ori.on('click', @.testfunc() )
@images_layer.add ori
@calculate_position()
@stage.add @images_layer
@stage.add @message_layer
testfunc: ->
console.log "event when is_clicked"
calculate_position: ->
@current_img_in_line++
@current_xpos = @current_xpos + @image_width + @horizontal_spacing
if @current_img_in_line > @max_pics_in_line
@current_xpos = @first_xpos
@current_ypos = @current_ypos + @vertical_spacing + @image_height
@current_img_in_line = 1
window.onload = ->
stage = new Gallery
container: "gallery_container"
width: width
height: height
stage.addImages()
Error here:
ori.on('click', @.testfunc() )
"this" ("@") is not instance of Gallery class. "@" linked to Kinetic.Rect instance. You can do this:
ori.on 'click', =>
@testfunc()
How "=>" works in coffee: http://coffeescript.org/#fat_arrow Your edited code: http://jsfiddle.net/lavrton/tDVy6/3/