Handlebars Example

Basic use of handlebars.js including helper functions

by amindunited

HTML

<script src="https://github.com/downloads/wycats/handlebars.js/handlebars-1.0.0.beta.6.js"></script>
<!-- SOF Template For Part 2: basic handlebars usage -->
<script id="allTweets_Template_basic" type="text/x-handlebars">

<ul class="tweeters">
    <li>
    {{#tweeters}}
        <ul class="tweeter">
        {{#tweeter}}
            <li class="tweet">
                <div class="time"><i>{{created_at}}</i></div>
            {{text}}<br>
            </li>
        {{/tweeter}}
        </ul>
    {{/tweeters}}
        
    </li>
</ul>
</script>
<!-- EOF Template For Part 2: basic handlebars usage -->


<!-- SOF Template For Part 3: handlebars helpers -->
<script id="allTweets_Template" type="text/x-handlebars">

<ul class="tweeters">
    <li>
    {{#tweeters}}
        <ul class="tweeter">
        {{#tweeter}}
            {{#firstChild ../tweeter}}<div class="full_name"><h1>{{user.name}}</h1></div>{{else}} {{/firstChild}}
            <li class="tweet">
                <div class="time"><i>{{created_at}}</i></div>
            {{text}}<br>
            </li>
        {{/tweeter}}
        </ul>
    {{/tweeters}}
        
    </li>
</ul>
</script>
<!-- EOF Template For Part 3: handlebars helpers -->

<!-- Div for the end results -->
<div id="allTweets_Placeholder">

</div>

CSS

h1 {
    font-weight:bold;
    font-size:2em;
    padding:5px;
    color:#FFFFFF;
}
.tweeters{
    padding:5px;
    padding-bottom:0px;
    
    padding-top:0px;
    width:300px;
    margin-left:auto;
    margin-right:auto;
}
.tweeter {
     width:300px;  
    background:#3D668F;    
}
.full_name { background:#3D668F url(http://jsfiddle.net/img/top-bg.png) repeat-x;}
.tweet {
    padding:5px;
    padding-top: 10px;
    margin:1px;
    margin-right:2px;
    margin-left:2px;
    background-color:#dedede;
    color:#000000;
}
.tweet:nth-child(odd){
    background-color:#efefef;
    color:#333333;
}
.tweet:last-child{margin-bottom:0px;}
.time {
    font-size: 0.75em;
    margin-bottom: 5px;
}

JavaScript

//set this to change the result based on what section of the example you are on
var current_part = 1;

////////////////////////////////////////////////////////////////////////////////
// SOF Part 01
/**
 * Here we request the data that we will use..
 * pretty standard JSON request using JQUERY
 * (not really handlebars stuff)
 */
 
 // Set current_part to 1!!!
 
/**
 * SOF DATA REQUEST 
 */

// Write out the raw response data
function draw_raw () {
    $('<pre></pre>')
        .html(JSON.stringify(allTweets))
        .appendTo('#allTweets_Placeholder')
        .css({'word-wrap':'break-word'});
}

// Create an array of twitter account objects 
// (later we will grab the accounts from accounts.twitter) 
var accounts = [{'name': {'first':'Rasmus','last':'Lerdorf'},'twitter': 'rasmus'},
                {'name': {'first':'Bill','last':'Gates'},'twitter': 'BillGates'},
                {'name': {'first':'John','last':'Resig'},'twitter': 'jeresig'}];

// This will hold the data that we will use with handlebars
// I've created a containing object to make it easier to iterate...
// (it's kind of annoying to have an array as the root element in handlebars)
var allTweets = {}
    allTweets.tweeters = [];


// On ready we will request the tweets from each account
// after the last account we will draw the page
$(document).ready(function(){
    
    for ( var i in accounts){
        // Build the url based on account[x].twitter
        var acc_url = "http://api.twitter.com/1/statuses/user_timeline.json?screen_name=@";
            acc_url += accounts[i]['twitter']+"&callback=?";
        
        // build the callback function
        var callback = function (data) {
            
            // push the tweets as object
            allTweets.tweeters.push({"tweeter":data});
            
            // if it's the last account we can draw the page
            if ( allTweets.tweeters.length === accounts.length ){
                
                switch (current_part) {
            ...