JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-2.2.1.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.3.5/knockout.mapping.js"></script>
 <ul data-bind="foreach: allItems">
    <li>
        <span data-bind="text: name"> </span>
    </li>
</ul>
 
<button data-bind="click: sortItems">Sort</button>

JavaScript

// How can I use json data instead of the observable array to build the list?
        var viewModel;
        $.getJSON('http://echo.jsontest.com/name/Stuart', function (data) {
            viewModel = ko.mapping.fromJS(data);
            ko.applyBindings(viewModel);
        });




var ListSortModel = function () {

  // my items
    this.allItems = ko.observableArray([
        { name: 'Denise' },
        { name: 'Charles' },
        { name: 'Bert' },
        { name: 'Hien' },
        { name: 'A' }
    ]); 
 
    // sorter
    this.sortItems = function() {
        this.allItems(this.allItems().sort(function(a, b) {   alert(a.name + ' ' + b.name); return a.name > b.name;}));
    };
};
 
ko.applyBindings(new ListSortModel());