kineticjs passing parameter to callback function on onclick

Question

I know in jquery you can do it with something like
$('#btn').on('click',{param:'hello'},callback). But with kinetic, I can't seem to do it. Any idea?
var Stage = new Kinetic.Stage({ container: 'SurfaceCircle', width: 70, height: 68 }); var topBtnLayer = new Kinetic.Layer({ id: 'top' });

var topBtn = new Kinetic.Shape({ drawFunc: function (context) { context.moveTo(11, 10); context.arc(35, 34, 34, 1.25 * Math.PI, 1.75 * Math.PI, false); context.lineTo(44, 25); context.arc(35, 34, 12, 1.75 * Math.PI, 1.25 * Math.PI, true); context.lineTo(11, 10);
context.fillStrokeShape(this); context.stroke() }, stroke: 'black', fill: 'yellow', strokeWidth: 2/, id: 'top'/, visible: true }); topBtnLayer.add(topBtn).on('click tap',{param:'hello'}, callback);
I will get runtime error Uncaught TypeError: Object # has no method 'call'

Answer 1

The Kinetic object eventing system (.on) takes only 2 parameters

• the event type to listen for (eg "click")
• the callback function

In the callback this is the Kinetic object.

Therefore, you can set a property on the object that will be accessible inside the callback.

topBtn.param="hello";

topBtn.on("click",function(){ alert(this.param); });  // click alerts "hello"

Demo: http://jsfiddle.net/m1erickson/5QRAA/