Slashdev

jQTemplate is a jQuery plugin that provides a clean and powerful way to dynamically build DOM elements from JavaScript. It eliminates the often messy element generation in JavaScript and allows the developer to define HTML templates in a nice readable fashion.

You might be asking “why yet another jQuery templating engine?”. I needed an engine with the following qualities:

easy to use syntax
capable of loops/iteration for generating copies of a given element
unlimited nesting of loops
function/event binding on elements
set element attributes
set element content

I felt that nothing out there filled my requirements. The google-jstemplate engine did provide most of the features I was looking for but I really was looking for something that had jQuery integration. This library is very much inspired by google-jstemplate.

Examples

Lets take a simple example: generate a bullet list from elements in an array.

$().ready(function() {
   $("#template > ul").jqtemplate({
      list: ["So", "Freakin", "AWESOME!"]
   });
});

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

And a more advanced example: generate a bullet list from the array, bind some events, and set an attribute.

$().ready(function() {
   $("#template > ul").jqtemplate({
      rand: function() {
         return 8 + (Math.random() * 20);
      },
      onHover: function() {
         $(this).css("background-color", "cyan");
      },
      onLeave: function() {
         $(this).css("background-color", "white");
      },
      list: ["Item 1", "Item 2", "Item 3", "Item 4", "Item 5"]
   });
});

<div id="template" style="display: none">
   <ul>
      <li jqloop="{object: 'item', array: $this.list}"
          jqbind="[{event: 'mouseenter', fn: $this.onHover},
                   {event: 'mouseleave', fn: $this.onLeave}]"
          jqattr="{style: 'font-size: ' + $this.rand() }"
          jqtext="$this.item" />
   </ul>
</div>

Reference

A template is comprised of regular HTML (usually hidden) with special attributes that are evaluated to produce some dynamic content in the DOM.

The attributes are evaluated as JavaScript. An object model is used to provide the context of the attribute evaluation and exposed as an object named ‘$this’.

Attributes:

jqtext

The attribute is evaluated and the result is inserted as the contents of the DOM element.

jqattr

Map of key/value pairs used to set attributes of the DOM element.

jqbind

Array of objects with properties for building event bindings to the DOM element. The following properties are used.

event:: name of the event to bind to

fn:: event handler function

args:: optional, single arg or array of args passed to event handler

jqloop

Object with properties for building a loop. For each iteration of the loop the DOM element is cloned and appended to it’s parent element. The following properties are used.

array:: the array to iterate over

object:: name of variable in context object to hold current value

Parameters:

jQuery.jqtemplate(model, options)

model

Object: An object to use as the context of the template evaluation.

options

Map: A set of key/value pairs that configure template processing. All options are optional.

inplace: Boolean: If true, evaluate the template in place instead of cloning the template and appending to root. Default is false.
root: String, jQuery: The root node to append the template evaluation. Use a string to specify a selector expression or a jQuery object. Defaults to the <body> node.

Download & Source

The latest version (0.4) is available here.

You can browse the source in the git repository.

License

Licensed under the GPL.