JSFiddle - React, Tailwind, and code Playground

Handlebars on YUI Basic usage of the handlebars library with YUI, event delegation and all that we saw before!

by David Iglesias

HTML

<script src="http://cloud.github.com/downloads/wycats/handlebars.js/handlebars-1.0.rc.1.js"></script>
<script type="text/x-handlebars" id="people-template">
    <h1>People <button id="shuffle">Shuffle List</button></h1>
    <ul>
        {{#each people}}
        <li>
            <p>
                <img src="{{avatar}}" />
                <a href="{{tuentiLink uid}}" target="_blank"><span class="name">{{name}}</span></a>
            </p>
            <p>
                <em>
                    {{#if age}}
                        {{age}}, 
                    {{/if}}
                    {{city}}
                </em>
            </p>
        </li>
        {{/each}}
    </ul>
</script>

<div id="output"></div>

CSS

body { padding: 10px; font-family: "Arial", sans-serif; }
h1 { font-size: 2em; font-weight: bold; margin-bottom: 20px; }
li { display: block; overflow: auto; padding: 10px; }
li:hover { cursor: pointer; background: #eee; }

    li img { width: 50px; float: left; margin-right: 10px; }
    li p { margin-bottom: 5px; }
    li a { color: #378FCF; }
    li span {font-weight: bold; font-size: 1.1em; }
    li em { color: #666; }

JavaScript

YUI().use('node-event-delegate', function(Y) {

    // Register a helper, to get the URL to a Tuenti profile!
    Handlebars.registerHelper('tuentiLink', function(uid) {
        return "http://www.tuenti.com/#m=Profile&func=index&user_id=" + uid;
    });
    
    /**
     * This function turns an object with a "people" array and renders it using handlebars templates
     * @param context {Object} {people:[ {name, age, city, uid, avatar}] }
     * @return {String} rendered HTML code
     */
    var renderPeople = function(context) {
        // Compile the template (we do this step on the build, and prepare a YUI module full of compiled templates)
        // A compiledTemplate is just a function that receives data (context) and outputs a (html) string
        var compiledTemplate = Handlebars.compile(Y.one("#people-template").getHTML());
        return compiledTemplate(context);
    };
    
    /**
     * Shuffles an array in place
     * @param o {Array} Input array
     * @return {Array} Shuffled array
     * @see http://stackoverflow.com/a/6274381/1738205
     */
    var shuffleArray = function(o) {
        for(var j, x, i = o.length; i; j = parseInt(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x);
        return o;
    };

    // The data that we're going to render
    var peopleData = {
        people: [
            {
                name: "Alberto Gragera",
                age: 29,
                city: "Montijo",
                uid: "60138125",
                avatar: "http://ak1.img.tuenti.net/MdlfPQOVoo0crJxuAwDAAMAAJQAy"
            },
            {
                name: "David Iglesias",
                age: 29,
                city: "Langreo",
                uid: "62135604",
                avatar: "http://tsimg.tuenti.net/MeK-KAO0HTRmbXogAwDAAMAAMgAm"
            },
            {
                name: "Michal Rudnicki",
                age: 33,
                city: "Częstochowa",
                uid: "72012863",
                avatar:...