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
{$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!