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!

jLinq - JQuery LINQ to JSON

The other day, I was writing some code for having my entity objects transformed to XML or JSON as simple as ToJSON and ToXML, and it got me wondering, what if I could have something like this on client-side?
Did some research (google.com?q=jquery+linq) and WOW, JQuery has a plugin that allows me to perform LINQ queries on my JSON data?? Jackpot!

Let me show you some code so you can reset your mindset:

var results = jLinq.from(data.users)
    .startsWith("first", "a")
    .orEndsWith("y")
    .orderBy("admin", "age")
    .select();

How cool is this? Are you thinking about the millions of applications for this? The millions of possibilities and richer web applications we can build with this? So am I!

Go to this page and download it right away, because this has some really untapped potential, congrats to Hugoware for this great achievement!

See you soon, enjoy it.