JSFiddle - React, Tailwind, and code Playground
HTML
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.4/underscore-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/mustache.js/0.7.2/mustache.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.0.0/moment.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css">
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0-rc.3/handlebars.min.js"></script>
<div class="tweets"></div>
<script id="tweets-underscore" type="text/template">
<ul>
<% _.each( tweets, function( tweet ) { %>
<li>
<i><%= tweet.created_at %></i>:
<b><%= tweet.user.name %></b> -
<span><%= tweet.text %></span>
<% if ( tweet.retweeted ) { %><i class="icon-repeat"></i><% } %>
<% if ( tweet.favorited ) { %><i class="icon-star"></i><% } %>
</li>
<% }); %>
</ul>
</script>
JavaScript
(function( twitter, $, undefined ) {
var _selection;
twitter.init = function( $selection ) {
_selection = $selection;
};
twitter.displayTweets = function( tweets ) {
var templateString = $( "#tweets-underscore" ).html(),
template = _.template( templateString );
tweets = _.map( tweets, function( tweet ) {
tweet.created_at = moment( tweet.created_at ).fromNow();
return tweet;
});
_selection.empty().append( template( { tweets: tweets } ) );
};
}( window.twitter = window.twitter || {}, jQuery ));
var tweets = [
{ id: 0, created_at: "Mon Apr 11 8:00:00 +0000 2013", text: "Test Tweet 1",
favorited: false, retweeted: false, user: { name: "User 1" } },
{ id: 1, created_at: "Mon Apr 11 9:00:00 +0000 2013", text: "Test Tweet 2",
favorited: true, retweeted: true, user: { name: "User 2" } },
{ id: 2, created_at: "Mon Apr 11 10:00:00 +0000 2013", text: "Test Tweet 3",
favorited: false, retweeted: true, user: { name: "User 3" } },
{ id: 3, created_at: "Mon Apr 11 11:00:00 +0000 2013", text: "Test Tweet 4",
favorited: true, retweeted: false, user: { name: "User 4" } },
{ id: 4, created_at: "Mon Apr 11 12:00:00 +0000 2013", text: "Test Tweet 5",
favorited: true, retweeted: true, user: { name: "User 5" } }
];
$( document ).ready( function() {
twitter.init( $( ".tweets" ) );
twitter.displayTweets( tweets );
});