Introducing jQTemplate

<script type="text/javascript">
$(document).ready(function() {
   $("#template > ul").jqtemplate({
      list: ["So", "Freakin", "AWESOME!"]
   });
});
</script>

<div id="template" style="display: none">
   <ul>
      <li jqloop="{object: 'val', array: $this.list"
          jqtext="$this.val" />
   </ul>
</div>

Some time ago I started a little experiment to see what this whole “Web 2.0” development thing was all about. The goal of the experiment was to develop a simple application without the help of any server side web framework, and instead use JSON as a data interchange format. All HTML, CSS, and JavaScript should be cleanly separated.

Cleanly separating the HTML from the JavaScript posed a challenge and thus jQTemplate was born. The concept is simple: write snippets of HTML code with annotations (in the form of special XML attributes) that can be used to transform the snippet into elements in the DOM.

The result I think is actually quite nice, and I love me some pretty code!