Hi all,
I''m working on a class MY.Slider that combines a script.aculo.us
slider with a form input field. On creation, the class stores a
reference to the Control.Slider object and the input element. I want
the change event to fire a method on the combination class so that it
can check the input and update the slider. However, i''m a bit lost on
how the get the scope of the object instead of the element in
onInputChange. I''ve tried observing with the plain function,
bind(this) and, as below, bindAsEventListener(this).
I''m a bit new to prototype, Scripty (got the bungee book) and advanced
JavaScript, so sorry if i''m asking a to obvious question.
TIA, Vincent de Lau
<code>
if (!MY) var MY = { };
MY.Slider = Class.create({
initialize: function(name, min, max, current, step) {
this.name = name;
this.min = min || 0;
this.max = max || 100;
this.value = current || 0;
this.step = step || 1;
this.input = $(''slider_''+name+''_input'');
this.track = $(''slider_''+name+''_track'');
this.handle =
$(''slider_''+name+''_handle'');
this.slider = new
Control.Slider(''slider_''+name+''_handle'',
''slider_''+name+''_track'',
{range: $R(this.min,this.max)} );
this.slider.options.onSlide this.onSliderChange.bindAsEventListener(this);
this.slider.options.onChange this.onSliderChange.bindAsEventListener(this);
this.input.observe(''change'',this.onInputChange.bindAsEventListener(this));
},
updateInput: function() {
// TODO: format value
this.input.value = this.value;
},
updateSlider: function() {
this.slider.setValue(this.value);
},
onSliderChange: function(value) {
// TODO: check bounds, round value
if(this.value != value) {
this.value = value;
this.updateInput();
}
},
onInputChange: function() {
// TODO: check bounds, round value
if(this.input.value != value) {
this.value = this.input.value;
this.updateSlider();
}
}
});
</code>
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---
Either bind(this) or bindAsEventListener(this) ought to do it. (Note:
nine times out of ten, bind(this) is what you need. I''ll explain why
if you like, but for now I''ll hold off because it''s a long
story.)
The problem, I think, is that instead of ...
if(this.input.value != value) {
... you really mean ...
if (this.input.value != this.value) {
... since "value" has no meaning in that context. But I''m not
sure. I
can tell what the expected behavior is, but what''s happening instead?
Cheers,
Andrew
On Feb 1, 2:52 am, Vincent de Lau
<vinc...-DGMA52Z2+hGEVqv0pETR8A@public.gmane.org>
wrote:> Hi all,
>
> I''m working on a class MY.Slider that combines a script.aculo.us
> slider with a form input field. On creation, the class stores a
> reference to the Control.Slider object and the input element. I want
> the change event to fire a method on the combination class so that it
> can check the input and update the slider. However, i''m a bit lost
on
> how the get the scope of the object instead of the element in
> onInputChange. I''ve tried observing with the plain function,
> bind(this) and, as below, bindAsEventListener(this).
>
> I''m a bit new to prototype, Scripty (got the bungee book) and
advanced
> JavaScript, so sorry if i''m asking a to obvious question.
>
> TIA, Vincent de Lau
>
> <code>
> if (!MY) var MY = { };
>
> MY.Slider = Class.create({
> initialize: function(name, min, max, current, step) {
> this.name = name;
> this.min = min || 0;
> this.max = max || 100;
> this.value = current || 0;
> this.step = step || 1;
>
> this.input =
$(''slider_''+name+''_input'');
> this.track =
$(''slider_''+name+''_track'');
> this.handle =
$(''slider_''+name+''_handle'');
> this.slider = new
Control.Slider(''slider_''+name+''_handle'',
>
''slider_''+name+''_track'',
> {range: $R(this.min,this.max)} );
>
> this.slider.options.onSlide >
this.onSliderChange.bindAsEventListener(this);
> this.slider.options.onChange >
this.onSliderChange.bindAsEventListener(this);
>
>
this.input.observe(''change'',this.onInputChange.bindAsEventListener(this));
> },
> updateInput: function() {
> // TODO: format value
> this.input.value = this.value;
> },
> updateSlider: function() {
> this.slider.setValue(this.value);
> },
> onSliderChange: function(value) {
> // TODO: check bounds, round value
> if(this.value != value) {
> this.value = value;
> this.updateInput();
> }
> },
> onInputChange: function() {
> // TODO: check bounds, round value
> if(this.input.value != value) {
> this.value = this.input.value;
> this.updateSlider();
> }
> }});
>
> </code>
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---
Maybe this was indeed the problem, but i created a workaround. I stored a refence to my object in the element (this.input.controller = this) and reference the controller from event.target.controller. I''ll take some more time next time to dive into this. Thanks anyway for you help! Andrew Dupont schreef:> Either bind(this) or bindAsEventListener(this) ought to do it. (Note: > nine times out of ten, bind(this) is what you need. I''ll explain why > if you like, but for now I''ll hold off because it''s a long story.) > > The problem, I think, is that instead of ... > > if(this.input.value != value) { > > ... you really mean ... > > if (this.input.value != this.value) { > > ... since "value" has no meaning in that context. But I''m not sure. I > can tell what the expected behavior is, but what''s happening instead? > > Cheers, > Andrew > > On Feb 1, 2:52�am, Vincent de Lau <vinc...-DGMA52Z2+hGEVqv0pETR8A@public.gmane.org> wrote: > > Hi all, > > > > I''m working on a class MY.Slider that combines a script.aculo.us > > slider with a form input field. On creation, the class stores a > > reference to the Control.Slider object and the input element. I want > > the change event to fire a method on the combination class so that it > > can check the input and update the slider. However, i''m a bit lost on > > how the get the scope of the object instead of the element in > > onInputChange. I''ve tried observing with the plain function, > > bind(this) and, as below, bindAsEventListener(this). > > > > I''m a bit new to prototype, Scripty (got the bungee book) and advanced > > JavaScript, so sorry if i''m asking a to obvious question. > > > > TIA, Vincent de Lau > > > > <code> > > if (!MY) var MY = { }; > > > > MY.Slider = Class.create({ > > � initialize: function(name, min, max, current, step) { > > � � this.name = name; > > � � this.min = min || 0; > > � � this.max = max || 100; > > � � this.value = current || 0; > > � � this.step = step || 1; > > > > � � this.input = $(''slider_''+name+''_input''); > > � � this.track = $(''slider_''+name+''_track''); > > � � this.handle = $(''slider_''+name+''_handle''); > > � � this.slider = new Control.Slider(''slider_''+name+''_handle'', > > � � � � � � � � � � � � � � � � � � �''slider_''+name+''_track'', > > � � � � � � � � � � � � � � � � � � �{range: $R(this.min,this.max)} ); > > > > � � this.slider.options.onSlide > > this.onSliderChange.bindAsEventListener(this); > > � � this.slider.options.onChange > > this.onSliderChange.bindAsEventListener(this); > > > > this.input.observe(''change'',this.onInputChange.bindAsEventListener(this)); > > � }, > > � updateInput: function() { > > � � // TODO: format value > > � � this.input.value = this.value; > > � }, > > � updateSlider: function() { > > � � this.slider.setValue(this.value); > > � }, > > � onSliderChange: function(value) { > > � � // TODO: check bounds, round value > > � � if(this.value != value) { > > � � � � this.value = value; > > � � � � this.updateInput(); > > � � } > > � }, > > � onInputChange: function() { > > � � // TODO: check bounds, round value > > � � if(this.input.value != value) { > > � � � � this.value = this.input.value; > > � � � � this.updateSlider(); > > � � } > > � }}); > > > > </code>--~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Ruby on Rails: Spinoffs" group. To post to this group, send email to rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org To unsubscribe from this group, send email to rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-spinoffs?hl=en -~----------~----~----~----~------~----~------~--~---