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>
        {{#each commentsByIdx}}
            <li>{{text}}</li>
        {{/each}}
    </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' },
    ],
};
Object.defineProperty( context, 'commentsByIdx', {
    get: function() {
        return this.comments.concat()
            .sort( function(a,b) { return a.idx - b.idx } );
    }
});
        
var sortedTempl = Handlebars.compile( $('#sortedTempl').html() );
var unsortedTempl = Handlebars.compile( $('#unsortedTempl').html() );
        
$('#sorted').html( sortedTempl( context ) );
$('#unsorted').html( unsortedTempl( context ) );