{ 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

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 += " " + clientData.name[i] + " "; clRec += " " + clientData.name[i] + " ";}$("ul").append(clRec); HTML Soup

${name} ${name} </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 1 st contribution from Microsoft MIT/GPL – Just like jQuery Official Plugin supported by the jQuery Project

Data Template Templating Engine DOM

var tmpl = " ${ dataItem } "; A Template

${ dataItem } ${ dataItem } </script> A Template

${Name} ${Name} Price: ${formatPrice(Price)} Price: ${formatPrice(Price)} <img data-pk="${Id}" src="Content/AddCart.png" <img data-pk="${Id}" src="Content/AddCart.png" alt="Add to Cart" class="addCart" /> alt="Add to Cart" class="addCart" /> </script> A Template

.tmpl() $("#myTemplate").tmpl( dataObject ).appendTo("ul"); ${ dataItem } ${ dataItem } </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

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

${name} {{if (age > 30)}} is Old!{{/if}} Code Blocks

${name} ${name} {{if (age > 30)}} is Old!{{/if}} {{if (age > 30)}} is Old!{{/if}} {{tmpl($data) "#ageTemplate"}} {{tmpl($data) "#ageTemplate"}}</script> Current Age: ${age} Current Age: ${age} </script> Nesting

function addAge() { return this.data.age + 12; }…. Current Age: ${addAge} Custom Functions

var clientData = [ { name: "Rey Bango", age: 32, id: 1, phone: [ " ", " " ] },…]; ….<ul> {{each phone}} ${$value} {{/each}} </ul> Looping

Code

Make it Better!

Rate Me!

Rey