javascriptevent-handlingcoffeescriptdom-eventskineticjs

eventhandling in kineticjs


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()

Solution

  • 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/