How to lazy load scripts in YUI that accompany ajax html fragments

Question

I have a web app with Tabs for Messages and Contacts (think gmail). Each Tab has a Y.on('click') event listener that retrieves an HTML fragment via Y.io() and renders the fragment via node.setContent().

However, the Contact Tab also requires contact.js to enable an Edit button in the fragment. How do I defer the cost of loading contact.js until the user clicks on the Contacts tab? How should contact.js add it's listener to the Edit button?

The Complete function of my Tab's on('click') event could serialize Get.script('contact.js') after Y.io('fragment'). However, for better performance, I would prefer to download the script in parallel to downloading the HTML fragment. In that case, I would need to defer adding an event listener to the Edit button until the Edit button is available.

This seems like a common RIA design pattern. What is the best way to implement this with YUI? How should I get the script? How should I defer sections of the script until elements in the fragment are available in the DOM?

Answer 1

According to Dav:

"What I would do is in the IO callback for the HTML fragment, just after calling setContent, use Y.Get to load the script file:"

That is quite reasonable.

Answer 2

Caridy's Dispatcher module can also handle this, and is probably my favorite solution to this issue atm. It was just covered in today's YUI Open Hours & it looks great.