Advanced Search

Return to Snippet

Revision: 33099
at October 6, 2010 04:12 by Nettuts
Initial Code 
<!DOCTYPE HTML>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <title></title>
      <link rel="stylesheet" href="style.css" />

      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
      <script src="jquery.tmpl.js"></script>
   </head>
   <body>

      <h1> Tweets about Nettuts+ </h1>

      <script id="tweets" type="text/x-jquery-tmpl">
         <li>
            <img src="${imgSource}" alt="${userName}" />
            <h2> ${username} </h2>
            <p> ${tweet} </p>

            {{if geo}}
            <span>
               ${geo}
            </span>
            {{/if}}
         </li>
      </script>

      <ul id="twitter"></ul>

      <script>
         $.ajax({
            type : 'GET',
            dataType : 'jsonp',
            url : 'http://search.twitter.com/search.json?q=nettuts',

            success : function(tweets) {
               var twitter = $.map(tweets.results, function(obj, index) {
                  return {
                     username : obj.from_user,
                     tweet : obj.text,
                     imgSource : obj.profile_image_url,
                     geo : obj.geo
                  };
               });

               $('#tweets').tmpl(twitter).appendTo('#twitter');
            }
      });

      </script>
   </body>
</html>
Initial URL 
http://net.tutsplus.com/tutorials/javascript-ajax/quick-tip-working-with-the-official-jquery-templating-plugin/
Initial Description 
This is quick code that demonstrates the usage of Microsoft's jQuery templating plugin.
Initial Title 
Using the Official jQuery Templating Plugin
Initial Tags 
javascript, plugin, jquery
Initial Language 
jQuery