JSFiddle - React, Tailwind, and code Playground

by Jammerwoch

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0/handlebars.min.js"></script>
<script id="sortedTempl" type="text/x-handlebars-template">
    <b>Sorted:</b>
    <ul>
        {{#eachByIdx comments}}
            <li>{{text}}</li>
        {{/eachByIdx}}
    </ul>
</script>

<script id="unsortedTempl" type="text/x-handlebars-template">
    <b>Unsorted:</b>
    <ul>
        {{#each comments}}
            <li>{{text}}</li>
        {{/each}}
    </ul>
</script>

<div id="sorted"></div>
<div id="unsorted"></div>

JavaScript

var context = {
    comments: [
        { idx:6, text:'violet' },
        { idx:1, text:'orange' },
        { idx:0, text:'red' },
        { idx:5, text:'indigo' },
        { idx:3, text:'green' },
        { idx:2, text:'yellow' },
        { idx:4, text:'blue' },
    ],
};
        
Handlebars.registerHelper('eachByIdx', function(context,options){
    var output = '';
    var contextSorted = context.concat()
        .sort( function(a,b) { return a.idx - b.idx } );
    for(var i=0, j=contextSorted.length; i<j; i++) {
        output += options.fn(contextSorted[i]);
    }
    return output;
});        
        
var sortedTempl = Handlebars.compile( $('#sortedTempl').html() );
var unsortedTempl = Handlebars.compile( $('#unsortedTempl').html() );
        
$('#sorted').html( sortedTempl( context ) );
$('#unsorted').html( unsortedTempl( context ) );