CODEWITHSUNDEEP
javascriptjquery
Jonathan Cakes
Jonathan Cakes

Reputation: 319

How to access class member variables inside an event handler defined in a class prototype - Javascript

I've seen this solution that works when the event is defined in the constructor:

Accessing class member variables inside an event handler in Javascript

But when the handler is defined in the prototype it doesn't have scope to see "var _self" from the previous solution. Is there a variation that will work for code similar to below?

The problem is with the "this" in the "slide" handler... referring to the HTML element instead of the member variables in MyView.

function MyView(wrapperDiv)
{
    this.contentW = 1200;
    this.vboxW = 600;
    this.vboxH = 400;
    this.vboxX = 0;
    this.vboxY = 0;
}

MyView.prototype = {

    initHorizontalScrollBar : function ($bar)
    {
        //create the wrappers for the slider
        if($bar.find('.slider-wrap').length==0)
            $bar.append('<\div class="slider-wrap"><\div class="slider-horizontal"><\/div><\/div>');//append the necessary divs so they're only there if needed
        $bar.find('.slider-wrap').width(this.svgWidth);

        //initialize the JQueryUI slider
        $bar.find('.slider-horizontal').slider({
            orientation: 'horizontal',
            min: 0,
            max: 100,
            range:'min',
            value: 0,
            slide: function(event, ui) {

                var difference = this.contentW-this.vboxW;
                if(difference<=0)
                    return;
                this.vboxX =  (ui.value) / 100 * ( this.contentW-this.vboxW);       // 0 >= ui.value <= 100
                this.svg.setAttribute("viewBox", toViewBoxString(this.vboxX, this.vboxY, this.vboxW, this.vboxH));
                $('ui-slider-range').width(ui.value+'%');//set the height of the range element
            }
          });     


        this.sizeHScrollbar();
    }
};

Upvotes: 0

Views: 927

Answers (1)

jfbalanc
jfbalanc

Reputation: 165

You just need to add a variable holding the correct reference within your initHorizontalScrollBar method:

MyView.prototype = {

    initHorizontalScrollBar : function ($bar)
    {
        var _self = this;
        //create the wrappers for the slider
        if($bar.find('.slider-wrap').length==0)
            $bar.append('<\div class="slider-wrap"><\div class="slider-horizontal"><\/div><\/div>');//append the necessary divs so they're only there if needed
        $bar.find('.slider-wrap').width(this.svgWidth);

        //initialize the JQueryUI slider
        $bar.find('.slider-horizontal').slider({
            orientation: 'horizontal',
            min: 0,
            max: 100,
            range:'min',
            value: 0,
            slide: function(event, ui) {

                var difference = _self.contentW - _self.vboxW;
                if(difference<=0)
                    return;
                _self.vboxX =  (ui.value) / 100 * ( _self.contentW - _self.vboxW);       // 0 >= ui.value <= 100
                this.svg.setAttribute("viewBox", toViewBoxString(_self.vboxX, _self.vboxY, _self.vboxW, _self.vboxH));
                $('ui-slider-range').width(ui.value+'%');//set the height of the range element
            }
          });     


        this.sizeHScrollbar();
    }
};

Upvotes: 1

Related Questions