JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.3.3/backbone-min.js"></script>
<ul id="foo-list"></ul>
JavaScript
var $foo = $('#foo-list');
var collection = new Backbone.Collection();
collection.comparator = function (model) {
return -model.get('createdAt');
};
collection.on('add', function(model) {
var index = model.collection.indexOf(model);
var $children = $foo.children('li:eq(' + (index-1) + ')');
console.log(index, model.get('createdAt'), $children.get(0));
if (!$children.length) {
$foo.append($('<li>').html(model.get('createdAt')));
} else {
$children.after($('<li>').html(model.get('createdAt')));
}
});
/*collection.add({createdAt: '2018-02-01'});
collection.add({createdAt: '2018-03-01'});
collection.add({createdAt: '2018-02-14'});
collection.add({createdAt: '2018-02-12'});
collection.add({createdAt: '2018-03-02'});*/
collection.add([
{createdAt: '2018-02-01'},
{createdAt: '2018-03-01'},
{createdAt: '2018-02-14'},
{createdAt: '2018-02-12'},
{createdAt: '2018-03-02'}
], {
sort : true
});
/*
setTimeout(function() {
collection.add({createdAt: '2018-02-01'});
collection.add({createdAt: '2018-03-01'});
collection.add({createdAt: '2018-02-14'});
collection.add({createdAt: '2018-02-12'});
collection.add({createdAt: '2018-03-02'});
}, 2000);*/