{ beyond string concatenation using jquery templating to cleanly display your data
TRANSCRIPT
{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!
