Posted By

Nettuts on 10/06/10

Tagged

Versions (?)

Last Edited at 10/06/10 04:12am

Statistics

Viewed 1107 times

Favorited by 8 user(s)

Related snippets

Using the Official jQuery Templating Plugin

/ Published in: jQuery

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

Expand | Embed | Plain Text

Copy this code and paste it in your HTML

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