Using the Official jQuery Templating Plugin


 / Published in: jQuery
 

URL: http://net.tutsplus.com/tutorials/javascript-ajax/quick-tip-working-with-the-official-jquery-templating-plugin/

This is quick code that demonstrates the usage of Microsoft's jQuery templating plugin.

  1. <!DOCTYPE HTML>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title></title>
  6. <link rel="stylesheet" href="style.css" />
  7.  
  8. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
  9. <script src="jquery.tmpl.js"></script>
  10. </head>
  11. <body>
  12.  
  13. <h1> Tweets about Nettuts+ </h1>
  14.  
  15. <script id="tweets" type="text/x-jquery-tmpl">
  16. <li>
  17. <img src="${imgSource}" alt="${userName}" />
  18. <h2> ${username} </h2>
  19. <p> ${tweet} </p>
  20.  
  21. {{if geo}}
  22. <span>
  23. ${geo}
  24. </span>
  25. {{/if}}
  26. </li>
  27. </script>
  28.  
  29. <ul id="twitter"></ul>
  30.  
  31. <script>
  32. $.ajax({
  33. type : 'GET',
  34. dataType : 'jsonp',
  35. url : 'http://search.twitter.com/search.json?q=nettuts',
  36.  
  37. success : function(tweets) {
  38. var twitter = $.map(tweets.results, function(obj, index) {
  39. return {
  40. username : obj.from_user,
  41. tweet : obj.text,
  42. imgSource : obj.profile_image_url,
  43. geo : obj.geo
  44. };
  45. });
  46.  
  47. $('#tweets').tmpl(twitter).appendTo('#twitter');
  48. }
  49. });
  50.  
  51. </script>
  52. </body>
  53. </html>

Report this snippet  

You need to login to post a comment.