JSFiddle - React, Tailwind, and code Playground

HTML

<script type="text/javascript" src="http://knockoutjs.com/downloads/knockout-3.2.0.js"></script>

<div data-bind="foreach: data.sortBy('type', 'asc').sortBy('name','desc')">
    <span data-bind="text: name"></span>
    <span data-bind="text: type"></span>
    <hr />
</div>

JavaScript

ko.observableArray.fn.sortBy = function(fld, direction)
{
    var isDesc = direction && direction.toLowerCase() == 'desc';
    
    return ko.observableArray(this.sort(function (a, b) {
        a = ko.unwrap(a[fld]);
        b = ko.unwrap(b[fld]);

        return (a == b ? 0 : a < b ? -1 : 1) * (isDesc ? -1 : 1);
        }));
};

ko.applyBindings({
    data: ko.observableArray([
{ name: "Bungle", type: "Bear" },
{ name: "Boogle", type: "Bear" },
{ name: "George", type: "Hippo" },
{ name: "Zippy", type: "Unknown" }
])
});