Event delegation, eh? I've encountered the concept in passing, but I've never
really tried it out. I can see the benefits in terms of performance, though.
I'm on a roll tonight, so I'll do some Googling, and see what I can do. Thanks!
----- Original Message ----
From: Trevan Richins <[EMAIL PROTECTED]>
To: rubyonrails-spinoffs@googlegroups.com
Sent: Monday, June 30, 2008 9:35:00 PM
Subject: [Rails-spinoffs] Re: Attaching event observers to a series of elements
- best practice?
greenie2600 wrote:
> Hi all,
>
> New member here. I've been working with Prototype for a while, and I
> love it. However, there's one thing I still can't figure out.
>
> Let's say I have an array of objects, representing contacts in an
> address book:
>
> var contacts = [
> { id: 1, firstName: "Bob", lastName: "Smith" },
> { id: 2, firstName: "Sue", lastName: "Johnson" },
> { id: 3, firstName: "Tim", lastName: "Horton" }
> ];
>
> I'd like to iterate over this array, create an <li> for each contact,
> and—here's the tricky part—attach an onclick observer to each <li>,
> which calls the openContact() function and passes in the ID of the
> contact that was clicked.
>
> I understand closures. However, I haven't found an elegant way to
> solve the problem. This won't work:
>
> function populateContactsList( contacts )
>
> var theUL = document.getElementById("addr-book-index");
> var thisLI = null;
>
> for ( var i = 0; i < contacts.length; i++ ) {
> thisLI = document.createElement("li");
>
> thisLI.appendChild( document.createTextNode( contacts[i].name ) );
> theUL.appendChild( thisLI );
> Event.observe( thisLI, "click", function() {
> openContact( contacts[i].id );
> } );
> }
>
> }
>
> ...because every call to openContact() will receive 3 as the parameter
> - the value of contacts[i].id at the time the outer function exits.
>
> I've been kludging my way around the problem by storing data in the
> element's id attribute (e.g., <li id="contacts-index-3">Tim Horton</
> li>), but I'm not entirely happy with this solution. Suggestions?
>
> For bonus points: I like to use innerHTML to insert new content into
> the DOM. Yes, it's non-standard, but it's widely supported, and it's
> much faster than the DOM methods - see
> http://quirksmode.org/dom/innerhtml.html.
> If you can suggest a clean technique that allows me to keep using
> innerHTML *and* attach onclick handlers in the way I've described,
> I'll write a song extolling your greatness.
You could use Event Delegation and attach the onclick listener to the ul
and then inside of the listener function use event.element().id to grab
the id of the item that was clicked on. This way, you can build the
content using innerHTML (or .update() which is basically the same thing)
and only have one event listener to worry about (reduces memory footprint).
--~--~---------~--~----~------------~-------~--~----~
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@googlegroups.com
To unsubscribe from this group, send email to [EMAIL PROTECTED]
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---
