Friday, December 11, 2009

jTemplates - client-side xslt-like template mechanism

Hello again, just found this awesome JQuery plugin and I had to write a post about, it's just incredible...
If on my previous post I talked about jLinq's untapped potential, this jTemplates leave me speechless.
Imagine you can have a web application, that consumes JSON services and you can have an entire templating mechanism, right here, live, transforming your data to something user friendly, instantaneously?

Some concepts:

Constants:
- $T - data
- $P - parameters
- $Q - XHTML element's attributes

Look here at a simple example of it's operation:

var mydata = { name: "Anne", age: "20" };

$("#result").setTemplate("{$T.name}");
$("#result").processTemplate(mydata);

Result = "Anne"

You can use some statements like IF, FOR, FOREACH, PARAM, CYCLE include templates on other templates, send parameters, use js functions, use static content, comments, etc.

IF
{#if 2*8==16} good {#else} fail {#/if}

FOR
{#for index = 1 to 10} {$T.index} {#/for}

FOREACH
{#foreach $T.table as record} {$T.record.name} {#/for}

INCLUDE
var template1 = $.createTemplate('{$T.name} ({$T.age})');
$('#result').setTemplate('{#include t1 root=$T.table[0]}', {t1: template1});
$('#result').processTemplate(data);

PARAM
$("#result").setTemplate("{#param name=x value=888}{$P.x}");
$("#result").processTemplate();

CYCLE
{#foreach $T.table as row}

{#/for} 
{$T.row.name.link('mailto:'+$T.row.mail)}

the cycle iterates through it's values each time the foreach statement (or for) iterates, so the output for this would be alternated row colors between #AAAAAA and #CCCCCC.

Parameters
$("#result").setTemplate("{$P.param1}");
$("#result").setParam('param1', 888);
$("#result").processTemplate();

Functions
$("#result").setTemplate("{$T.toUpperCase()}");
$("#result").processTemplate();

Static Content
$("#result").setTemplate("{#literal}class Car {
  int fuel;
};{#/literal}");
$("#result").processTemplate();

Comments
$("#result").setTemplate("{* Header *}
head
{* Content *}
{$T.italics()}
"); $("#result").processTemplate("jTemplates");

For a complete reference, go to the owner page

Enjoy!

No comments: