jQTemplate


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:

  1. easy to use syntax
  2. capable of loops/iteration for generating copies of a given element
  3. unlimited nesting of loops
  4. function/event binding on elements
  5. set element attributes
  6. 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.