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>

how about:

[=== person ===]
<p>This is the person template</p>
<p><span><%= name.first %></span>&nbsp;<span><%= name.last %></span></p>
[=== location ===]
<p>This is the Location template</p>
<p><span data="city"><%= city %></span></p>
[=== ul ===]
<ul></ul>
[=== item ===]
<li>This is an item <%= locals %></li>

While I could support this style of syntax, Im using conventional DOM methods to break down the template file into reusable templates. And EJS for good mesure.

    for(var i = 0;i<el.childNodes.length;i++) {

      if (el.childNodes[i].nodeType != 3) {

        this.templates[el.childNodes[i].id] = (function(i){
          return function(data) {
            var node = el.childNodes[i];
            var options = {
              locals : data
            }
            return render(escape(el.childNodes[i].innerHTML), options );
          }
        })(i);
      }
    }

This would be all good on the serverside. On the client side though, wouldn't this restrict you to using xhtml?

So maybe I'm not clear. The problem I'm not really trying to solve is micro-templating, or specifically string interpolation. This is done with EJS. I want to add a higher layer of abstraction and solve reusable templates on the client/server.

Your template file(s) would exist on the server as a single file, or series of partials written in XHTML / EJS it would be compiled down into one template file that would be delivered to the client.

So we could even take another step back and convert from another format.

So XHTML => JS => HTML
or YAML => XHTML => JS => HTML
or HAML => XHTML => JS => HTML

You get the idea, but the client only really cares about the compiled template fragement and the ID or Name.

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.