Question

In a custom dijit, I have a button with the data-dojo-attach-event hooked up to a method called _goNext. I need to animate a node declared inside the Dijit controller javascript file, but it seems the scope of animateProperty is fudging things up a bit.

require([/* deps */], function(/*deps*/){
    return declare(null, {
    postCreate : function(){
        this._animNode = query('.someNode')[0];
    },
    // non-essentials omitted
    _goNext : function(){
        fx.animateProperty({
            node : this._animNode
            properties : { 
                left : { 
                    start : this._start,
                    end : this._end,
                    unit : 'px'
                } 
            },
            onEnd : function(){
                this.updateCurrentScreen();
            }
        }).play();
    }
} 
})

… is essentially what I’m working with. As this goes, it does nothing, as it’s scope is different than where my nodes and values are declared. If I put values in manually (hard-coded) and apply an id for the node parameter to grab onto, it works fine, but that’s silly and not what I’m after.

I’ve tried wrapping it in an anonymous wrapper passing this as the argument, but I’m getting TypeErrors with style and some other things.

Do I have to go as far as using hitch or some other variant of scope modifying method? Or is there an easier way to have this thing ready this correctly.

Answer 1

You definitely need to hitch your onEnd handler to the current value of this, otherwise you’ll have context issues when you try to call updateCurrentScreen