Handlebars

by amindunited

HTML

<script src="https://github.com/downloads/wycats/handlebars.js/handlebars-1.0.0.beta.6.js"></script>
<script id="myTemplate" type="text/x-handlebars">
{{reset_index}}

<div class="data-module feature-bets cnr cnrfffx5px open" collapse-type="collapse_feature_bets">

    <div class="tabbed-content">

        {{! /*<!--  This section creates the tabs -->*/}}
        <ul class="tabs cnr cnrEDx5px clearfix">

            <li class="title"><h2 class="module-title module-view-toggle">Feature Bets</h2></li>
            {{resetParentIds}}
            {{#feature_bets.categories}}
            {{registerAttr ../feature_bets.categories "parent_id"}}
            {{contextualIndex ../feature_bets.categories}}
                    {{#first_pId ../feature_bets.categories}}
                        <li class="tab{{#first_index ../../feature_bets.categories}} active first{{/first_index}}{{#isLast ../../feature_bets.categories}} last{{/isLast}}" data-tab="tabs-B-{{get_index}}">

                        <a href="#"><img src="{{image_path}}icons/category/light/{{category_image}}" alt=""/> {{parent_name}}</a>
                            <span class="cnrTL"></span><span class="cnrTR"></span>
                        </li>
                    {{/first_pId}}
            {{/feature_bets.categories}}
        </ul>

        {{! /*<!--  This section creates the content -->*/}}
        <div class="tab-contents-wrap module-hideable">
            {{reset_index}}
            {{#feature_bets.categories}}


                {{! /*<-- Sets the context for this section of the loop -->*/ }}
                {{registerAttr ../feature_bets.categories "parent_id"}}
                {{contextualIndex ../feature_bets.categories}}



                {{! /*<-- starts a new tab-content section -->*/ }}
                {{#first_pId ../feature_bets.categories}}
                    <div class="tab-content{{#first_index  ../../feature_bets.categories}} active{{/first_index}}" id="tabs-B-{{get_index}}">
                ...

CSS

h3 { width:300px; }
ul { 
    margin:0; 
    padding:0;
    list-style: none;        
}
.members-list li {
    width:100px;
    margin: 0;
    padding:0;
    padding-left: 5px;
    padding-right: 5px;
    list-style: none;
    display: inline-block;
}
.members-list li, h3 {    
    background: #becedd; /* Old browsers */
    background: -moz-linear-gradient(top,  #becedd 0%, #d0d7dd 25%, #828991 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#becedd), color-stop(25%,#d0d7dd), color-stop(100%,#828991)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #becedd 0%,#d0d7dd 25%,#828991 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #becedd 0%,#d0d7dd 25%,#828991 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #becedd 0%,#d0d7dd 25%,#828991 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #becedd 0%,#d0d7dd 25%,#828991 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#becedd', endColorstr='#828991',GradientType=0 ); /* IE6-9 */

}

JavaScript

var add_handlebar_helper_functions = function () {
    /*global Handlebars*/

    var index = 0;
    var odd = 0;
    var parent_ids = [];

    // **requires that reset_index is called at the start of the loop**
    //counts iterations and returns boolean if current iteration is the first
    Handlebars.registerHelper('first_index', function(context, block) {
        index++;
        if (index === 1) {
            return block.fn(this);
        }
        return block.inverse();
    });

    //returns current iteration count
    Handlebars.registerHelper('get_index', function () {
        return index - 1;
    });

    //resets current index count
    Handlebars.registerHelper('reset_index', function () {
        index = 0;
    });


    //alternates true/false for each call
    Handlebars.registerHelper('odd_not_even', function () {

        if (odd > 0) {
            odd = 0;
            return false;
        }

        odd++;

        return true;
    });


    // a iterate over a specific portion of a list.
    // usage: {{#slice items offset="1" limit="5"}}{{name}}{{/slice}} : items 1 thru 6
    // usage: {{#slice items limit="10"}}{{name}}{{/slice}} : items 0 thru 9
    // usage: {{#slice items offset="3"}}{{name}}{{/slice}} : items 3 thru context.length
    // defaults are offset=0, limit=5
    Handlebars.registerHelper('slice', function (context, block) {
        var ret = ""
        var offset = parseInt(block.hash.offset) || 0;
        var limit = parseInt(block.hash.limit) || 5;
        var i = (offset < context.length) ? offset : 0;
        var j = ((limit + offset) < context.length) ? (limit + offset) : context.length;

        for (i, j; i < j; i++) {
            ret += block.fn(context[i]);
        }

        return ret;
    });

    //Is first iteration within current contextual loop
    Handlebars.registerHelper('isFirst', function (context, block) {
        if (context[0] == this) {
            return block.fn(this);
        } else {
           ...