JSFiddle - React, Tailwind, and code Playground

by jlubean

HTML

<script src="https://github.com/downloads/wycats/handlebars.js/handlebars.1.0.0.beta.3.js"></script>
<script id="mytemplate" type="text/x-handlebars-template">
    <h1>People</h1>
    {{#join people delimiter=" and " start="0" end="2"}}{{name}} ({{gender}}, {{age}}){{/join}}
    <h1>Jobs</h1>
    {{join jobs delimiter=", " start="1" end="2"}}
</script>

CSS

h1 {font-size: 14pt; margin: 10px 0;}
body {margin: 5px;}

JavaScript

//Handlebars "join" block helper that supports arrays of objects or strings.  If "delimiter" is not speficified, then it defaults to ",".  You can use "start", and "end" to do a "slice" of the array.

Handlebars.registerHelper('join', function(items, block) {
    var delimiter = block.hash.delimiter || ",", 
        start = start = block.hash.start || 0, 
        len = items ? items.length : 0,
        end = block.hash.end || len,
        out = "";
    
        if(end > len) end = len;
    
    if ('function' === typeof block) {
        for (i = start; i < end; i++) {
            if (i > start) out += delimiter;
            if('string' === typeof items[i])
                out += items[i];
            else
                out += block(items[i]);
        }
        return out;
    } else { 
        return [].concat(items).slice(start, end).join(delimiter);
    }
});

var context = {people : [{name : "Bob", age : 35, gender : "M"}, {name : "Sally", age : 39, gender : "F"}], jobs : ["Secretary", "Astronaut", "Musician"]};
var template = $("#mytemplate").html();
var compiledTemplate = Handlebars.compile(template);
$("body").html(compiledTemplate(context));