Handlebars Expression Helper: groupedEach

Grouped Each. http://stackoverflow.com/questions/31727016/get-index-of-the-item-when-there-are-two-rows-of-items-handlebars

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.5/handlebars.min.js"></script>
<script id="template" type="text/x-handlebars-template">
{{#grouped_each 4 orderData}}
<div class="row" data-count="{{@index}}">
    {{#each this }}
    <div class="col-md-3">
        <div class="thumbnail">
            <div class="caption">
                <p><b>Key {{@key}}:</b> {{name}}</p>    
            </div>
        </div>
    </div>
    {{/each}}
</div>
{{/grouped_each}}
</script>

<div id="rendered"></div>

CSS

#rendered {
  display: table;
}
.row {
  display: table-row;
}
.row > div {
  display: table-cell;
  padding: 0.5em;
  border: 1px solid white;
  background-color: silver;
}

JavaScript

Handlebars.registerHelper('grouped_each', function(every, context, options) {
        var out = '';
        var i;
        var j = 0;

        if (context && context.length > 0) {

            var group = {};
            var data = {
                index: j
            };

            for (i = 0; i < context.length; i++) {

                if (i > 0 && i % every === 0) {
                    data.index = j++;
                    out += options.fn(group, {
                        data: data
                    });
                    group = {};
                }

                group[i] = context[i];
            }

            data.index = j++;
            out += options.fn(group, {
                data: data
            });
        }

        return out;
});

var template = Handlebars.compile($("#template").html());
$("#rendered").html(template(
    {
        "orderData": [
            {
                "name": "Order 1",
            },
            {
                "name": "Order 2",
            },
            {
                "name": "Order 3",
            },
            {
                "name": "Order 4",
            },
            {
                "name": "Order 5",
            },
            {
                "name": "Order 6",
            },
            {
                "name": "Order 7",
            },
            {
                "name": "Order 8",
            },
        ]
    }
));