jQuery-ZenCoding A New Templating Engine

jQuery-ZenCoding A New Templating Engine

Hello all,

I have developed a plugin for jQuery which I hope others will find as a useful templating engine.  This is based on the core idea of the ZenCoding project which is to take a css search string and convert it to html.  My project expands upon this idea by expanding the syntax so that dynamic content, events, and data can be embedded into the newly created element itself.  If this sounds useful, please feel free to try it out, fork it, report bugs, etc at www.github.com/zodoz/jquery-ZenCoding.

Some examples:

Extremely simply dynamic list:

  1. var zen = 'li{!value!}';
  2. var data = ["one","two","three"];
  3. $.zc(zen,data).appendTo($("<ul>")).appendTo($("body"));
Produces:
  1. <ul>
  2.   <li>one</li>
  3.   <li>two</li>
  4.   <li>three</li>
  5. </ul>

A somewhat more interesting example:

  1. var zen = '!for:contacts!.contact>('+
  2.   '.name{!name!}'+
  3.   '+.email>({!name!'s }+a[href="mailto:!email!"]{email}{.})'+
  4.   '+.bio{!bio!}';
  5. var data = {
  6.   contacts: [
  7.     {
  8.       name: 'Bob',
  9.       email: 'bob@s.com',
  10.       bio: 'Stuff Bob does.'
  11.     }, {
  12.       name: 'Joan',
  13.       email: 'joan@s.com',
  14.       bio: 'Stuff Joan does.'
  15.     }
  16.   ]
  17. };
  18. $.zc(zen,data).appendTo($('body'));
The above code will format a series of contacts in divs:
  1. <div class="contact">
  2.   <div class="name">Bob</div>
  3.   <div class="email">
  4.     <span>Bob's </span>
  5.     <a href="mailto:bob@s.com">email</a>
  6.     <span>.</span>
  7.   </div>
  8.   <div class="bio">Stuff Bob does.</div>
  9. </div>
  10. <div class="contact">
  11.   <div class="name">Joan</div>
  12.   <div class="email">
  13.     <span>Joan's </span>
  14.     <a href="mailto:joan@s.com">email</a>
  15.     <span>.</span>
  16.   </div>
  17.   <div class="bio">Stuff Joan does.</div>
  18. </div>