ONA Workshop: Getting More Awesome

Who among you at #ONA13 is learning to how to build projects with Tabletop.js and Handlebars.js? Here's a list.

HTML

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.0-rc2/css/bootstrap.min.css">
<script src="http://www.projects.chrislkeller.com/demos/ona-workshop/3-getting-more-awesome/scripts/swag.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0/handlebars.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/tabletop.js/1.1.0/tabletop.min.js"></script>

<div class="container">
    <div class="row">
        <h1>ONA Workshop: Getting More Awesome</h1>
        <p>Who among you at #ONA13 is learning to how to build projects with <a href="https://github.com/jsoma/tabletop" target="blank">Tabletop.js</a> and <a href="http://handlebarsjs.com/" target="blank">Handlebars.js</a>? We're making a list. And check out the <a href="https://github.com/chrislkeller/ona-workshop" target="_blank">code repo and docs</a>.</p>
        <div id="basic-handlebars-content"></div>
    </div>
</div>

<!-- this is our handlebars template. note the mustache brackets -->
<script id="basic-handlebars-template" type="text/x-handlebars-template">
    <div id="{{name}}" class="col-lg-4">

        <!-- adds an if logic via swag.js -->
        {{#if imageurl}}
            <img src="{{imageurl}}" class="img-responsive" alt="{{name}}" />
        {{else}}
            <img src="http://www.projects.chrislkeller.com/demos/ona-workshop/3-getting-more-awesome/default_image.jpg" class="img-responsive" alt="{{name}}" />
        {{/if}}

        <p class="centered"><strong>{{name}}</strong> (<a href="https://twitter.com/search?q={{twitterhandle}}&mode=users" target="_blank">{{twitterhandle}}</a>)</p>
        <p class="centered"><em>{{newsorganization}}</strong></em></p>
        <p class="centered">I'd like to learn...<br /><em>{{wouldliketolearn}}</strong></em></p>
        <p class="centered">{{#if linktoproject}}<a href="{{linktoproject}}" target="_blank">View my demo project </a>{{/if}}</p>
    </div>
</script>

CSS

/* image */
#basic-handlebars-content img {width: 80%; margin: 0 10% 10px 10%;}

/* typography */
.centered {text-align: center;}

JavaScript

/*
    i got in the habit of re-defining the jQuery variable
    to avoid conflicts with other libraries. That's
    what we're doing here.
*/
var jqueryNoConflict = jQuery;

/*
    this function initializes our query to tabletop.js when the page loads.
    it references the key of our spreadsheet and then runs a javascript function
    we identify in the callback parameter
*/
jqueryNoConflict(document).ready(function() {
    Tabletop.init({
        key: '1QE2_VVJaVDEZTUZNDSQvMG6tLe4mPIaPoYJiVFS7Q40',
        callback: displayData
    });
});

/*
    here's where we actually display our data.
*/
function displayData(data, tabletop) {

    // we identify the template markup we want to send our data to.
    var source = $('#basic-handlebars-template').html();

    // we compile the template
    var template = Handlebars.compile(source);

    // we loop through each data row
    jqueryNoConflict.each(tabletop.sheets('Sheet1').all(), function (i, data) {

        // and convert each row to template html
        var html = template(data);

        // and take the result and add it to a HTML element
        $("#basic-handlebars-content").append(html);
    });

};