JSFiddle - React, Tailwind, and code Playground

by fastfasterfastest

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.0/knockout-debug.js"></script>
<script src="https://github.com/SteveSanderson/knockout-projections/blob/master/src/knockout-projections.js"></script>
<!-- ko foreach: games -->
<span data-bind="html: $data"></span>
<!-- /ko -->

<button data-bind="click: push">
Push
</button>

JavaScript

ko.extenders.sorted = function(obs, sortFunction) {
        obs.sort(sortFunction);
        obs.subscribe(function (array) {
        console.log("subscribe handler - sorting...");
            array.sort(sortFunction);
        });
    };

var viewModel = function() {
var self = this;

self.games = ko.observableArray([5,4,3,2,1]).extend({
            sorted: function (left, right) {
            //debugger;
            return left < right ? -1 : 1;
            }});
            
self.push = function() {
	self.games.push(1 - self.games().length);
}
};



ko.applyBindings(viewModel);