James Senior's Blog

A while back I wrote about how to build Twitter Search using the templating engine in the ASP.NET Ajax Library and it was quite a popular post (BillG uses my code on his new website – glad you like it Bill ;-)…. Well since then, things have changed a bit back in Redmond and now instead of adding new features to that library we made a decision to change our approach and contribute to the jQuery Library instead.  We made the announcement at Mix10 in March and since then we’ve been working with the community to build a new templating engine and also introduced a new feature called data-linking (based off the data-binding feature in the old ASP.NET Ajax Library).  In other words we are coming good on our announcement and have changed the way the Ajax team work to the jQuery contribution model (see my previous post on the contribution model).

I thought it was about time I updated the code of the original twitter app to show how to achieve the same thing using the jQuery Templating engine.  A couple of differences you’ll notice straightaway is that the templating syntax has changed – the preferred method is ${ dataItem } – and the app now uses the jQuery.ajax method to make the JSONP call to the Twitter Search API in order to retrieve the search results.  Also, we are no longer using the sys namespaces to manipulate dom elements and gone is the script loader which was used to manage the loading and dependencies of the various scripts.

Step 1 – Define the Template

For simple templates i.e. “the one-liners” you can choose to simple assign the html fragment as a string to a variable.  However, for more complex templates you will want to declare them in a script block – and that’s what I’ve done in this sample.

<script type="text/template" id="tweetTemplate">
        <li>
            <a href="http://twitter.com/${ from_user }">
                <img src="${ profile_image_url }"/>
                <b>@${ from_user }</b>
            </a>
            says:            
            <br />
                ${ text }
            <br />
                <a href="http://twitter.com/${ from_user }/statuses/${ id }">
${ new Date(created_at).toUTCString() }</a>
            <br /> 
        </li>
</script>

Step 2 – Get the data from Twitter

To retrieve the search results from twitter we use jQuery’s ajax method which takes options for the type of data we expect back and the function to call when we receive the results in addition to the url for the search URL.  This is arguably more elegant than the Sys.Net.WebServiceProxy.invoke method we used before in the ASP.NET Ajax Library – but that’s more of a preference debate. 

$.ajax({
      dataType: "jsonp",
      jsonpCallback: "renderTweets",
      url: "http://search.twitter.com/search.json?q=" + query
});

Step 3 – Bind the data to the Template

It’s showtime for the templating engine!  It’s responsible for loading the template and then replacing the placeholders where it finds matches in the data structure that it is given.  This magic happens in the render() method which takes in data (as well as options) and after generating DOM elements for each data object using the template, it returns a jQuery object with the full array of elements. 

function renderTweets(data) {
    $("#tweetTemplate")
         .render(data.results)
         .appendTo("#tweetList");
}

We can take these generated elements and insert them into the DOM using one of the jQuery methods like appendTo.  That’s it – we’re done!

Next Steps

An idea to extend this sample would be to automatically query the Twitter Search API every 30 seconds or so (like Twitter does on the real-time search page on their site) and then add the new items in the search query to the top of the list.

Full source

The HTML, JS and CSS is available for download here.