Rails spinoffs - Jun 2007 - Prototype: Looping through a list, setting observe and passing event and position to a function?

Whats the best method of passing the position ''i'' and event
''e'' to a
function within Event.Observe?

At the moment when I mouse move and activate the pushDOM function I am
retrieving the last position in the loop and not the current position.

Here are some of the things I have tried with no luck..


======== Example 1 ===========
for (var i=0;i<icon.length;i++) {
	Event.observe(icon[i], ''mousemove'', function(e) { pushDOM(e,
i) },
false);
}

function pushDOM(e, elementNum) {
... do stuff ...
}

======== Example 2 ===========for(var i=0; i<icon.length; i++) {
   Event.observe(icon[i], ''mousemove'', pushDOM(i), false);
}


function make_handler(elementNum) {
    return function(e) {
    ... do stuff ...
    }
}

======== Example 3 ===========I`m not too sure how to use the .each function to
loop through, but
have seen some people use this method:

$$(''a.icon'').each(function(icons) {


--~--~---------~--~----~------------~-------~--~----~
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
-~----------~----~----~----~------~----~------~--~---

Hey,

That''s a classic scope issue: the ''i'' variable exists
outside the scope
of your anonymous function, and lexical closure preserves a *reference*
to it, but by the time your handler is called, the for loop moved the
variable''s value to the outer boundary (icon.length).

Using invoke which is a special-purpose each, you get local-scope
variables with proper values.  Try this (I renamed your "icon" to
"icons" as there are many in there...):

icons.each(function(icon, index) {
  $(icon).observe(''observe'', ''mousemove'',
    pushDOM.bindAsEventListener(index));
});

''HTH

-- 
Christophe Porteneuve a.k.a. TDD
"[They] did not know it was impossible, so they did it." --Mark Twain
Email: tdd-x+CfDp/qHev2eFz/2MeuCQ@public.gmane.org

--~--~---------~--~----~------------~-------~--~----~
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
-~----------~----~----~----~------~----~------~--~---

Yeah--your first example looks like it would have some scoping  
issues.  The second example binds the result of pushDom rather than  
the function reference, so that''s now what you want.

How ''bout (not tested):

icon.each(function (el, i) {  //use "for" or "each", as you
prefer
	el._myIndex = i  // or, if el is an id and not an element reference,  
then $(el). _myIndex = i;
	Event.observe(el, ''mousemove'', pushDom);
});

function pushDom(evt) {
	var el = Event.element(evt);
	// index is in el._myIndex
	// ... do stuff
}

If you would rather determine the index programatically (e.g. if it''s  
subject to change), some variation of the following might work for  
you (untested):

var i = el.previousSiblings().match(someCssSelector).length;


TAG

On Jun 22, 2007, at 10:35 AM, SlashEMc2k wrote:
>
> Whats the best method of passing the position ''i'' and
event ''e'' to a
> function within Event.Observe?
>
> At the moment when I mouse move and activate the pushDOM function I am
> retrieving the last position in the loop and not the current position.
>
> Here are some of the things I have tried with no luck..
>
>
> ======== Example 1 ===========>
> for (var i=0;i<icon.length;i++) {
> 	Event.observe(icon[i], ''mousemove'', function(e) {
pushDOM(e, i) },
> false);
> }
>
> function pushDOM(e, elementNum) {
> ... do stuff ...
> }
>
> ======== Example 2 ===========> for(var i=0; i<icon.length; i++) {
>    Event.observe(icon[i], ''mousemove'', pushDOM(i),
false);
> }
>
>
> function make_handler(elementNum) {
>     return function(e) {
>     ... do stuff ...
>     }
> }
>
> ======== Example 3 ===========> I`m not too sure how to use the .each
function to loop through, but
> have seen some people use this method:
>
> $$(''a.icon'').each(function(icons) {
>
>
> >

--~--~---------~--~----~------------~-------~--~----~
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
-~----------~----~----~----~------~----~------~--~---

Thanks for the help guys, its appreciated :)

On Jun 22, 5:50 pm, Tom Gregory <t...-PGZyUNKar/Q@public.gmane.org>
wrote:
> Yeah--your first example looks like it would have some scoping  
> issues.  The second example binds the result of pushDom rather than  
> the function reference, so that''s now what you want.
>
> How ''bout (not tested):
>
> icon.each(function (el, i) {  //use "for" or "each", as
you prefer
>         el._myIndex = i  // or, if el is an id and not an element
reference,
> then $(el). _myIndex = i;
>         Event.observe(el, ''mousemove'', pushDom);
>
> });
>
> function pushDom(evt) {
>         var el = Event.element(evt);
>         // index is in el._myIndex
>         // ... do stuff
>
> }
>
> If you would rather determine the index programatically (e.g. if
it''s
> subject to change), some variation of the following might work for  
> you (untested):
>
> var i = el.previousSiblings().match(someCssSelector).length;
>
> TAG
>
> On Jun 22, 2007, at 10:35 AM, SlashEMc2k wrote:
>
>
>
>
>
> > Whats the best method of passing the position ''i''
and event ''e'' to a
> > function within Event.Observe?
>
> > At the moment when I mouse move and activate the pushDOM function I am
> > retrieving the last position in the loop and not the current position.
>
> > Here are some of the things I have tried with no luck..
>
> > ======== Example 1 ===========>
> > for (var i=0;i<icon.length;i++) {
> >    Event.observe(icon[i], ''mousemove'', function(e) {
pushDOM(e, i) },
> > false);
> > }
>
> > function pushDOM(e, elementNum) {
> > ... do stuff ...
> > }
>
> > ======== Example 2 ===========> > for(var i=0; i<icon.length;
i++) {
> >    Event.observe(icon[i], ''mousemove'', pushDOM(i),
false);
> > }
>
> > function make_handler(elementNum) {
> >     return function(e) {
> >     ... do stuff ...
> >     }
> > }
>
> > ======== Example 3 ===========> > I`m not too sure how to use
the .each function to loop through, but
> > have seen some people use this method:
>
> > $$(''a.icon'').each(function(icons) {- Hide quoted
text -
>
> - Show quoted text -

--~--~---------~--~----~------------~-------~--~----~
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
-~----------~----~----~----~------~----~------~--~---