jQuery Templates

A jQuery templating engine that allows embedded javascript templates for easy client side UI processing.

see http://github.com/merblogger for real application usage examples.

To load all templates:

Usually this is done when the document is ready, for example:

$(document).ready(function() { $.loadTemplates(); });

Templates are loaded in the DOM as tags and the rules are simple. Set the attribute to 'type="text/x-jquery-template"' and the title to what you would like to name the template. You will use the name to render the template later.

Let's consider a simple example of a template to generate a select box for entities:

$.loadTemplates() 'compiles' the template with title 'entities' into the $.templates object and is directly accessable as $.templates.entites. Templates are compiled into JS functions that you can call passing in template 'local' data. For examle:

var html = $.templates.entites( [{value: 1, name: "foo"}, {value: 2, name: "bar" }] );

After running this the 'html' variable will contain:

Using jQuery this can be inserted directly into the DOM:

$("body").append(html);

OR

html.appendTo($("body"));

Helper methods may also be added to the templater, currently it comes with a 'partial' helper available. The 'partial()' helper allows us to call a named template from within another template.

partial("other-partial-title", ...local data...);