this and event handler - depending sliders

[seb.s...@googlemail.com]

Hi,

I was advised to repost to this group so here it goes:

I successfully created depending sliders with prototype and slider.js.
See the result here: http://www.soa-world.de/dev/slider/slider.html
(here's the code: http://pastebin.com/ma1e82eb)
There is one problem with my code. What I do is I have a sliders class

"function sliders()"

inside I create the 5 sliders in a for loop and store them inside an
array which is a member of the class:

for()
{
this.sliders[i].ctrl = new Control.Slider();
}

I then add callbacks for the onChange and onSlide events also inside
the loop with:

this.sliders[i].ctrl.options.onSlide = handleSliderChange;
this.sliders[i].ctrl.options.onChange = handleSliderChange;

In the callback I get two parameters: the new value and the slider
that triggered the event. To do my stuff I now need one more thing: a
reference to the array that contians ALL the sliders - naturally you
would think this.sliders[] but no of course not, the event callback
doesn't recognize the this keyword anymore because it doesn't know it
belongs to the sliders class. I worked around this by using the object
I create and access the array there so I write:

s = new sliders();

and inside the callback I access the array:

s.sliders[]

but I think that's ugly. I tried it using bindAsEventListener - that
worked as far as the this keyword goes. I could access the array then
via this.sliders however I lost the second parameter for my callback
so I didn't know which slider triggered the event.

How could I make this work?
Thanks in advance,
Sebastian S.

[T.J. Crowder]

Hi,

In your original thread, you replied to my question:

> > Are these event handlers, or are you calling them directly? If you're
> > calling them directly from other code, you probably want bind() rather
> > than bindAsEventHandler().
>
> To be honest I can't tell the difference. But no I don't think they
> are events they are callbacks I can register so I'm not calling them
> directly from my code. The slider.js merely provides them. I think I
> already tried bind() and got the same result as with
> bindAsEventHandler(). The second parameter got lost.

I don't think the parameter got "lost" -- the calling code defines
what parameters get passed to the function, remember. If the
callbacks are documented that they only get one parameter, that's all
they're going to get, even if your function declares more (or indeed
fewer) parameters.

From your original description, what you want is bind() and then use
"this.sliders" to access the sliders within the handler. Get a bound
version of handleSliderChange:

boundHandler = handleSliderChange.bind(this);

...and then use it for the callbacks:

this.sliders[i].ctrl.options.onSlide = boundHandler;
this.sliders[i].ctrl.options.onChange = boundHandler;

...and then use this.sliders in your handleSliderChange.

Caveat: I've never used script.aculo.us sliders, but generically
speaking I'd expect the above to work.

Hope this helps,
--
T.J. Crowder
tj / crowder software / com

On Jul 7, 6:10 pm, "seb.scha...@googlemail.com"

[seb.s...@googlemail.com]

> From your original description, what you want is bind() and then use
> "this.sliders" to access the sliders within the handler.  Get a bound
> version of handleSliderChange:
>
> boundHandler = handleSliderChange.bind(this);
>
> ...and then use it for the callbacks:
>
> this.sliders[i].ctrl.options.onSlide = boundHandler;
> this.sliders[i].ctrl.options.onChange = boundHandler;
>
> ...and then use this.sliders in your handleSliderChange.
>

Works like a charm! Thanks a lot!