JSFiddle - React, Tailwind, and code Playground

by phsiao2000

HTML

<script src="http://documentcloud.github.io/underscore/underscore-min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0-rc1/css/bootstrap.min.css">
<script src="http://www.fsfoo.com/js/vendor/handlebars-1.0.rc.2.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.2/underscore-min.js"></script>
<script id="some-template" type="text/x-handlebars-template">
<ol class="breadcrumb">
   {{#foreach full}} 
      {{#if $last}}
         <li class="active">{{path}}</li>
      {{else}}
         <li><a href="{{built}}">{{path}}</a></li>
    {{/if}}
    {{/foreach}} 
</ol>
</script>

JavaScript

var source = $("#some-template").html();
var template = Handlebars.compile(source);

var h = "visit/about/our-people/music/joe.html";
var s = h.split("/");
if (_.last(s) == "index.html") {
    s = _.initial(s)
};
var dic = _.map(s, function (a) {
    return {
        path: a
    }
});
dic = {
    full: dic
};
var context = dic;

var x = _.reduce(context.full, function (memo, i) {
    memo = memo + "/" + i.path;
    i.built = memo;
    return memo;
}, "");
Handlebars.registerHelper("foreach", function (arr, options) {
    if (options.inverse && !arr.length) return options.inverse(this);

    return arr.map(function (item, index) {
        item.$index = index;
        item.$first = index === 0;
        item.$last = index === arr.length - 1;
        return options.fn(item);
    }).join('');
});

$('body').append(template(context));