1 / 32

Beyond String Concatenation

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.

kitra
Download Presentation

Beyond String Concatenation

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  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”>

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

  8. 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);

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

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

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

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

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

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

  15. Data Templating Engine DOM Template

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

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

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

  19. .tmpl() <script id=“myTemplate" type="text/html"> <li>${ dataItem }</li> </script> $("#myTemplate") .tmpl( dataObject) .appendTo("ul"); <ul></ul>

  20. Code

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

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

  23. Inline Expressions <script id=“myTemplate" type="text/html"> <li>${parseInt(ReleaseYear) + 100}</li> </script>

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

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

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

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

  28. Code

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

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

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

More Related