JSFiddle - React, Tailwind, and code Playground

by neonms92

HTML

<div data-bind="foreach: sort(things,'text')">
    <span data-bind="text: text"></span>
</div>

JavaScript

function Model() {
    var self = this;
    self.things = ko.observableArray([]);
    
    self.sort = function(arr, prop) {
        return arr.sort(function (a, b) {
            var item1 = a[prop](), item2 = b[prop]();
            if (item1 < item2)
                return -1;
            if (item1 > item2)
                return 1;
            return 0;
        });
    }
}
function Thing(text) {
    var self = this;
    self.text = ko.observable(text);
}
var model = new Model();
model.things.push(new Thing('C'));
model.things.push(new Thing('A'));
model.things.push(new Thing('B'));
ko.applyBindings(model);