{ Beyond String Concatenation Using jQuery Templating to Cleanly Display Your Data.

{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

@[email protected]

[email protected]://blog.reybango.com