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>
<!-- ko foreach: {data:games} -->
<span data-bind="text: $data"></span>
<span data-bind="text: '(' + $parent.games().join() + ')'"> </span>
<!-- /ko -->

<button data-bind="click: push">
Push
</button>
<div data-bind="text: games().join()"></div>

JavaScript

ko.extenders.sorted = function(obs, sortFunction) {
        obs.sort(sortFunction);
        obs.subscribe(function (array) {
            array.sort(sortFunction);
        });
    };

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

self.games = ko.observableArray([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(new viewModel());