sprite.on("pointerdown", callback) trouble

[TemperTony]

Hi guys,

I'm having a bit of trouble using the on click sprite function. So what happens is when I call another function through the on click of the sprite, the function isn't able use a  variable that was defined in the constructor 

        this.isOpen = false

        this.icon = new PIXI.Sprite.fromFrame('icons/inventoryclose.png')
        this.icon.interactive = true
        this.icon.buttonMode = true
        this.icon.on("pointerdown", this.toggle)
        this.addChild(this.icon)

    toggle() {
        this.isOpen = true

    }

Rather than being able to set this.isOpen = true, it doesn't know of it.

Am I doing something wrong? Any help would be awesome

[Taz]

If you use bind like this it should work:

this.icon.on("pointerdown", this.toggle.bind(this))

 

[ivan.popelyshev]

Alternative approach

toggle(event) {
    var self = event.currentTarget;
    self.isOpen = true;
}

One more, though im not sure

this.icon.on("pointerdown", this.toggle, this);

 

[Taz]

It looks like the display object is contained in an outer object, so event.currentTarget will be this.icon (the sprite), not the desired outer object (this).

Also InteractionManager just passes the eventData, not any context, judging from its dispatchEvent method:

displayObject[eventString](eventData);

 

It would be awseome if could pass context thoug:)

[TemperTony]

Wow that was fast, thank you guys a bunch! It worked perfectly.

Is there a logical explanation on why I have to use bind? Just for future reference

Thanks again!

[Taz]

InteractionManager calls the event handler function that you supply but it doesn't call it on an object. bind makes it like the function is called on the object that was passed to bind.. Er it's hard to explain well but Mozilla's docs on this and bind can explain better I think:)

EDIT: that's a little better but the Mozilla docs are better still:)