Blazing fast Semantic JS Templating with edit-in-place templates!
I actually developed this a while back.
ClientCide Blogged about SubtleTemplates a while back but I forgot to mention it here.
Take an HTML template and a javascript object and get a populated template! Perfect for use with JSON data.
You create the html template in the actual html of the page (or you can pass in a string). Keeping the html in the html allows the designers to have control of the html templates without forcing them to fiddle with javascript. You can also use the same template on your serverside and client-side templating! I’m doing that for some things on GreenSherpa.com
I added a fix to workaround the infamous IE innerHTML unquoted attributes issue.
Demos
DEMO5: Update the template and all instances AS YOU TYPE!!!1!
Your SubtleTemplate has a function that allows you to modify the template code in place. You pass in a function that gets bound to the root template node as an Element. You can then use any normal MooTools Element stuff on your template. When the function returns it updates every instance of that template on your page.
It’s fast enough that you can modify your template as you type, even in IE6.
DEMO3: Crappy performance test!
This basically just shows how many times you can repopulate a template instance in 10 seconds. Check it out in Chrome ;)
Since their default timeout is so much shorter it’s much more impressive.
**NOTE:** Since repopulating your template uses innerHTML, you'll have to use Event Delegation on the parent node for the best experience. Event Delegation will be built into the underpinnings of MooTools 2.0, until then you can use [ClientCide Event Delegation (take2)](https://www.clientcide.com/code-releases/event-delegation-take-2/ "Event Delegation, take 2 » Clientcide (Formerly CNET's Clientside)")