jQuery UI event scope problems

Question

I'm trying to build a class that automates the instantiation of a jquery ui slider. I can already instantiate the sliders, get them running etc. But when i'm binding the slide event I run into the problem that this is now the event. I've made a var _self = this; to resolve this, but that gets overwritten by every instance of the class.

The class:

$(function(window){
    function WoningSelector(slider_id, min_id, max_id, step, min, max){
        this.initialize(slider_id, min_id, max_id, step, min, max);
    }
    WoningSelector.prototype = {};
    var _self;

    // Constructor
    WoningSelector.prototype.initialize = function(slider_id, min_id, max_id, step, min, max){
        this.slider = $('#' + slider_id);
        this.min = $('#' + min_id);
        this.max = $('#' + max_id);

        this.iMin = min;
        this.iMax = max;
        this.step = step;

        _self = this;
        _self.slider.slider({
            range: true,
            step: this.step,
            min: this.iMin,
            max: this.iMax,
            values: [(this.iMin + (this.step * 4)), (this.iMax - (this.step * 4))],
            slide: this.slide
        });

        _self.min.text(this.iMin + (this.step * 4));
        _self.max.text(this.iMax - (this.step * 4));
    };

    // Slide event handler
    WoningSelector.prototype.slide = function(event, ui){
        _self.min.text(ui.values[0]);
        _self.max.text(ui.values[1]);
    };

    window.WoningSelector = WoningSelector;
}(window));

slide: this.slide.bind(this)?

Igor Dymov
– Igor Dymov

2013-06-19 12:14:00 +00:00
Commented Jun 19, 2013 at 12:14 — Igor Dymov
– Igor Dymov, Commented Jun 19, 2013 at 12:14

Nikolay Tsenkov · Accepted Answer · 2013-06-19 12:31:29Z

1

Use "this" in the event handler (remove self), but when binding to the event, don't simply pass

WoningSelector.prototype.slide

instead pass

$.proxy(WoningSelector.prototype.slide, theConcreteInstanceYouBind)

This way, your handler will be called with context (this) being theConcreteInstanceYouBind.

answered Jun 19, 2013 at 12:31

Nikolay Tsenkov

1,11710 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

jQuery UI event scope problems

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related