{Beyond String Concatenation

Using jQuery Templating to Cleanly Display Your Data

Rey Bango• jQuery Team Member• Microsoft Client-Web

Community PM  • Editor of ScriptJunkie.com• Ajaxian.com Writer• Co-host of the jQuery Podcast• Co-host of JSConf Live Podcast

Web Templates

Not a New Invention

• Server-side for years• ASP.NET• Smarty & Savant (PHP)• Cheetah & Mako (Python)

Awesome-Sauce• Separates content and

program code• Flexible architecture• Shortens development time• Readability• Great for teams

<form action=“clientUpdate.php” method=“post” name=“clUpd”>

Damnit DOM!• DOM Manipulation x1000• HTML Concatenation Soup• Readability Hell• Maintenance – Needles in

eyes

var clRec = "";

for(var i=0; i<clientData.name.length; i++) { clRec += "<li><a href='clients/"+clientData.id[i]+"'>" + clientData.name[i] + "</a></li>";}

$("ul").append(clRec);

HTML Soup

<script id=“clientTemplate” type=“text/html”><li><a href=‘clients/${id}’>$

{name}</a></li></script>

$(“#clientTemplate”).tmpl(clientData).appendTo( “ul” );

No Soup for You!

Clarity• Affect the UI via pre-built

templates • Nice well-defined structure• Less convoluted and hard to

understand code• Greater maintainability

Templates Good• Separates UI from data• JavaScript and HTML-based.

Easy!• JavaScript templates are

rendered and cached client-side• Promotes reusability of existing

templates• Designers & developers can

coexist <3

Aren’t server-side templates good

enough?

JS Engines

• JavaScript Micro-Templating

• jTemplates• PURE• mustache.js• jQuery Smarty• jQuote

jQuery Templating

• 1st contribution from Microsoft

• MIT/GPL – Just like jQuery• Official Plugin supported

by the jQuery Project

Data

Template

Templating Engine DOM

var tmpl = "<li>${ dataItem }</li>";

A Template

<script id=“myTemplate" type="text/html">

<li>${ dataItem }</li></script>

A Template

<script id="productsTemplate" type="text/html"> <div> <img src="Content/ProductImages/${Picture}" class="productImage" /> <span class="productName">${Name}</span> Price: ${formatPrice(Price)} <img data-pk="${Id}" src="Content/AddCart.png" alt="Add to Cart" class="addCart" /> </div></script>

A Template

.tmpl()

$("#myTemplate").tmpl( dataObject ).appendTo("ul");

<script id=“myTemplate" type="text/html"> <li>${ dataItem }</li></script>

<ul></ul>

Code

Main Methods

• tmpl()• tmplItem()• template()

- Render the template- Find the template item- Compile/Store a template

Supported Tags

• ${...}• {{each

...}}...{{/each}}• {{if ...}}...

{{else ...}}...{{/if}}• {{html ...}} • {{tmpl ...}}• {{wrap

...}}...{{/wrap}}

- Evaluate fields or expression- Loop over template items- Conditional sections- Insert markup from data - Composition, as template items- Composition, plus incorporation of wrapped HTML

<script id=“myTemplate" type="text/html">

<li>${parseInt(ReleaseYear) + 100}</li> </script>

Inline Expressions

<script id=“myTemplate" type="text/html"><li><a href="clients/${id}">${name}

{{if (age > 30)}} is Old!{{/if}}</a></li></script>

Code Blocks

<script id="clientTemplate" type="text/html"> <p><a href="clients/${id}">${name}

{{if (age > 30)}} is Old!{{/if}}</a></p> {{tmpl($data) "#ageTemplate"}}</script>

<script id="ageTemplate" type="text/html">

<p>Current Age: ${age}</p></script>

Nesting

function addAge() { return this.data.age + 12;}

….

<script id="ageTemplate" type="text/html"><p>Current Age: ${addAge}</p>

</script>

Custom Functions

var clientData = [{ name: "Rey Bango", age: 32, id: 1, phone: [ "954-600-1234", "954-355-5555" ] },…];

….

<ul>{{each

phone}}<li>${$value}</li>{{/each}}</ul>

Looping

Code

https://github.com/jquery/jquery-tmpl

Make it Better!

http://speakerrate.com/reybango

Rate Me!

Rey Bango@reybango

rey@reybango.comreybango@microsoft.comhttp://blog.reybango.com