It’s been a very busy few weeks, I have to say first off, so my apologies for making you wait so long for a new YUI code demo. Every time I do some digging into YUI3, I find things that are really interesting and useful. Take, for instance, Node.getData() and Node.setData(). These little methods allow you to store information associated with a particular Node, but you dont have to try to create some custom attribute or keep track of your own independent data storage object for you to use these methods. In a way, it allows you to associate information of any kind with elements on your page and are retrievable just by finding the Node and asking for the data. It’s like having a database on your page where the Nodes are the keys.

In terms of what you could do with this – the sky is the limit. You might store custom settings or perhaps a history of the changes to this element, or even additional data that might show up if the user clicks on the expand button or something. Anyway, it’s really useful, so here’s some sample code:

All I am doing here is setting up a list of elements which you can click on to set the “data” associated with that element, and when you mouseover it, you’ll see what you typed. For bonus points I have used the Y.delegate method, which allows you to just have one event listener on a page for all the list items. This saves memory and avoids potential memory leaks in IE. Also note the really handy property e.currentTarget. This is a pointer to the original Node that you wanted to use for your event delegation – very handy indeed!

Methods used: Node.getData() , Node.setData(), Y.delegate().

Update: Thanks go out to Luke Smith for helping me simplify the code a bit. I was able to remove the need to use the e.currentTarget, since the function already uses that as the “this” element. Nice!