JSFiddle - React, Tailwind, and code Playground

by Eric Howe

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0-rc.3/handlebars.min.js"></script>
<script id="t" type="text/x-handlebars">
    {{#each_with_sort array "sort_index"}}
        {{id}} - {{sort_index}} - {{@index}}<br>
    {{/each_with_sort}}
</script>

CoffeeScript

Handlebars.registerHelper('each_with_sort', (array, key, opts) ->
    data  = Handlebars.createFrame(opts.data) if(opts.data)
    array = array.sort (a, b) ->
        a = a[key]
        b = b[key]
        return  1 if a > b
        return  0 if a == b
        return -1 if a < b
    s = ''
    for e, i in array
        data.index = i if(data)
        s += opts.fn(e, data: data)
    s
)

t = Handlebars.compile($('#t').html())
$('body').append(t(
    array: [
        { id: 1, sort_index: 3 },
        { id: 2, sort_index: 1 },
        { id: 3, sort_index: 4 }
    ]
))