KineticJS - dynamically create array of shapes and using events

Question

I have managed to dynamically create an array of shapes, and they are nicely placed at different coordinates.

However, when I try to assign an event within that loop, the result of click is always the same. As if the click event is still referencing the last iteration of my loop.

What am I doing wrong? Thanks!

EDIT: Actually, re-produced this behaviour in an isolated environment:

var stage = new Kinetic.Stage({
        container: 'container',
        width: 1024,
        height: 768
    });
    var layer = new Kinetic.Layer();
    singleSegment=40;
    for (var i = 0; i < 4; i++) {
                depth=singleSegment+(singleSegment*i);
                dotLabel = new Kinetic.Text({
                    x: depth,
                    y: depth,
                    text: "test"
                });
                dotLabel.on('click', function(evt){
                    console.log(this.x);
                });
                layer.add(dotLabel);
    }
    stage.add(layer);

How do I add different events to these four labels?

Answer 1

You are doing everything correct, I think. but because of this;

            console.log(i);

The last value of i is array.length-1, and when it is clicked, it shows that value, which does not change because it's outside of loop when it is clicked.

This will show different value.

            console.log(this.attrs.x);

Answer 2

I just had to deal with this same issue. I solved it by storing to each shape its location.

    for (var axisItem=0;axisItem<innerCircleXAxisArray.length;axisItem++)
        {
            var arc = new Kinetic.Shape({
                drawFunc: function(canvas){
                    var allAttrs = this.getAttrs();
                    var start = allAttrs['start'];
                    var end = allAttrs['end'];
                    var context = canvas.getContext();
                    context.strokeStyle = 'red';

                    var centerOfCanvasX = canvasWidth / 2;
                    var centerOfCanvasY = canvasHeight / 2;

                    context.translate(centerOfCanvasX, centerOfCanvasY);
                    context.lineWidth = 15;
                    context.beginPath();
                    context.arc(0, 0, 284, start , end, true); 
                    canvas.stroke(this); // Fill the path
                    context.closePath();
                    context.translate(-centerOfCanvasX, -centerOfCanvasY);
                },
                fill: 'red',
                stroke: 'red',
                strokeWidth: 15
            });


            arc.setAttrs({'start': innerCircleXAxisArray[axisItem]['start'], 'end': innerCircleXAxisArray[axisItem]['end']});

            layer.add(arc);
        }
        stage.add(layer);

When the object is created, I use setAttrs to store the object's location - a start and end angle since these are arcs, but it could just as easily be an x and y point. Then in the drawFunc I use getAttrs to retrieve that data and to draw the object.