How do you handle large repeated UI elements with JQuery

Question

Howdy,

Here's the situation:

You have a very complex UI element that is repeated in a list. Each has a menu on it, buttons, it hides and shows subelements, buttons for switch it's state, etc, etc. The elements are populated via JSON so you have to construct the elements and the functionality of the fly.

What's the best way to accomplish this with JQuery? Where would you save the reusable template for the DOM structure? How would you add the behavior on? $().live? .livequery? onclick? manual after every JSON get?

I guess I just see a lot of people doing different things. What's your experience with performance?

Any insight would be much appreciated.

Thanks, JPoz

Answer 1

Without more information I would point you at these two places:

1. Question about various JQuery templating engines
2. A proposal to make templating be a part of jQuery. Part of the proposal is the discussion of how current popular templating engines work.

Where would you save the reusable template for the DOM structure?

This is an easier question to answer, the trend seems to be to put it into a script element with type text/html. Since most browsers don't know what to do with a script of that type the element goes ignored, but is still part of the DOM so you can get to it using a selector.