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-handlebars" type="text/x-handlebars-template">
<ul>
{{#each this}}
<li>
<i>{{fromNow this.created_at}}</i>: <b>{{this.user.name}}</b> - {{this.text}}
{{#if this.retweeted}}<i class="icon-repeat"></i>{{/if}}
{{#if this.favorited}}<i class="icon-star"></i>{{/if}}
</li>
{{/each}}
</ul>
</script>
JavaScript
(function( twitter, $, undefined ) {
var _selection;
twitter.init = function( $selection ) {
_selection = $selection;
Handlebars.registerHelper( "fromNow", function( time ) {
return moment( time ).fromNow();
});
};
twitter.displayTweets = function( tweets ) {
var templateString = $( "#tweets-handlebars" ).html(),
template = Handlebars.compile( templateString );
_selection.empty().append( template( 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 );
});