Beyond String Concatenation: Clean Data Display with jQuery Templating

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

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

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

9. HTML Soup varclRec = ""; 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);

10. No Soup for You! <script id=“clientTemplate” type=“text/html”> <li><a href=‘clients/${id}’>${name}</a></li> </script> $(“#clientTemplate”).tmpl(clientData).appendTo( “ul” );

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

16. Data Templating Engine DOM Template

17. A Template vartmpl = "<li>${ dataItem }</li>";

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

19. A Template <script id="productsTemplate" type="text/html"> <div> <imgsrc="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>

20. .tmpl() <script id=“myTemplate" type="text/html"> <li>${ dataItem }</li> </script> $("#myTemplate") .tmpl( dataObject) .appendTo("ul"); <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. Inline Expressions <script id=“myTemplate" type="text/html"> <li>${parseInt(ReleaseYear) + 100}</li> </script>

25. Code Blocks <script id=“myTemplate" type="text/html"> <li><a href="clients/${id}">${name} {{if (age > 30)}} is Old!{{/if}}</a></li> </script>

26. Nesting <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>

27. Custom Functions function addAge() { return this.data.age + 12; } …. <script id="ageTemplate" type="text/html"> <p>Current Age: ${addAge}</p> </script>

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

29. Code

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

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

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