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

2. 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

3. Web Templates

4. Not a New Invention Server-side for years ASP.NET Smarty & Savant (PHP) Cheetah & Mako (Python)

5. Awesome-Sauce Separates content and program code Flexible architecture Shortens development time Readability Great for teams

8. Damnit DOM! DOM Manipulation x1000 HTML Concatenation Soup Readability Hell Maintenance – Needles in eyes

9. var clRec = ""; for(var i=0; i<clientData.name.length; i++) { clRec += " " + clientData.name[i] + " "; clRec += " " + clientData.name[i] + " ";}$("ul").append(clRec); HTML Soup

10. ${name} ${name} </script> $(“#clientTemplate”).tmpl(clientData).appendTo( “ul” ); No Soup for You!

11. Clarity Affect the UI via pre-built templates Nice well-defined structure Less convoluted and hard to understand code Greater maintainability

12. 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

13. Aren’t server-side templates good enough?

14. JS Engines JavaScript Micro-Templating jTemplates PURE mustache.js jQuery Smarty jQuote

15. jQuery Templating 1 st contribution from Microsoft MIT/GPL – Just like jQuery Official Plugin supported by the jQuery Project

16. Data Template Templating Engine DOM

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

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

19. ${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

20. .tmpl() $("#myTemplate").tmpl( dataObject ).appendTo("ul"); ${ dataItem } ${ dataItem } </script> <ul></ul>

21. Code

22. Main Methods tmpl() tmplItem() template() - Render the template - Find the template item - Compile/Store a template

23. 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

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

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

26. ${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

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

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

29. Code

30. https://github.com/jquery/jquery-tmpl Make it Better!

31. http://speakerrate.com/reybango Rate Me!

32. Rey Bango @reybango rey@reybango.com reybango@microsoft.com http://blog.reybango.com