Angry Birds of JavaScript: Orange Bird - Templating

before.js

(function( twitter, $, undefined ) { 
    var _selection;
        
    twitter.init = function( $selection ) {
        _selection = $selection;
    };
    
    twitter.displayTweets = function( tweets ) {
        var $list = $( "<ul/ >" );
        
        $.each( tweets || {}, function( index, tweet ) {
            var html = "<i>" + moment( tweet.created_at ).fromNow() + "</i>: ";
            html += "<b>" + tweet.user.name + "</b> - ";
            html += "<span>" + tweet.text + "</span>";
            html += tweet.retweeted ? " <i class='icon-repeat'></i>" : "";
            html += tweet.favorited ? " <i class='icon-star'></i>" : "";
            
            $( "<li />", { html: html }).appendTo( $list );         
        });
            
       _selection.empty().append( $list.children() );         
    };
}( window.twitter = window.twitter || {}, jQuery ));

handlebars-precompile-include.html

<script src="tweets.tmpl.js"></script>

handlebars-precompile-include.js

var template = Handlebars.templates[ "tweets.tmpl" ],
    markup = template( tweets );

handlebars.html

<script id="tweets-handlebars" type="text/x-handlebars-template">
    <ul>
        {{#each this}}
        <li>
            <i>{{fromNow this.created_at}}</i>: 
            <b>{{this.user.name}}</b> - 
            <span>{{this.text}}</span> 
            {{#if this.retweeted}}<i class="icon-repeat"></i>{{/if}} 
            {{#if this.favorited}}<i class="icon-star"></i>{{/if}}
        </li>
        {{/each}}
    </ul>
</script>

handlebars.js

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 ) );         
};

install-handlebars.sh

npm install -g handlebars

precompile-handlebars.sh

handlebars tweets.tmpl -f tweets.tmpl.js

underscore-after.html

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

underscore-after.js

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 } ) );                   
};

underscore-before.html

<script id="tweets-underscore" type="text/template">
    <ul>
        <% _.each( tweets, function( tweet ) { %>
        <li>
            <i><%= moment( tweet.created_at ).fromNow() %></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>

underscore-before.js

twitter.displayTweets = function( tweets ) {
    var templateString = $( "#tweets-underscore" ).html(),
        template = _.template( templateString );
    
   _selection.empty().append( template( { tweets: tweets } ) );                   
};