Client Templating.js

      var templateData = this.responseText;

      var data = {
         person: {
           name : {
             first : 'Rob',
             last : 'Ellis'
           },
           age: 30,
           location : {
             city : 'Vancouver'
           }
         },
         ul : {
           item : ['one','two','three']
         }
       }
      
      // The Data drives the Data Binding, and Flow
      // Each Key is checked to see if a template existed by the same ID and called with the resulting data passed in
      // Arrays are iterated over and called inline.

      // Loads the templates from the XHR Request
      x$(window).loadTemplate(templateData);
      x$("#main").applyTemplate(data);  

Final Markup.html

<div id="main">
  <p>This is the person template</p>
  <p>
    <span>Rob</span>&nbsp;<span>Ellis</span>
    <p>This is the Location template</p>
    <p><span data="city">Vancouver</span></p>

    <ul>
      <li>This is an item one</li>
      <li>This is an item two</li>
      <li>This is an item three</li>
    </ul>
  </p>
</div>

Template File.html

<template id="person">
  <p>This is the person template</p>
  <p><span><%= name.first %></span>&nbsp;<span><%= name.last %></span></p>  
</template>

<template id="location">
  <p>This is the Location template</p>
  <p><span data='city'><%= city %></span></p>  
</template>

<template id="ul">
  <ul></ul>
</template>

<template id="item">
  <li>This is an item <%= locals %></li>
</template>

We have HTML templates that we re-use server side (via Template::Toolkit) and client side (via Jemplate). Our build process uses jemplate to compile the slides into .js. It works great and has the very rich syntax that Template::Toolkit offers. Not limited to producing HTML either. --oops this is lukec not vhs.