JSFiddle - React, Tailwind, and code Playground

by tugberk

HTML

<script src="http://cloud.github.com/downloads/SteveSanderson/knockout/knockout-2.0.0.debug.js"></script>
<ul data-bind="foreach: sortedInstances">
    <li data-bind="text: Name() + ' ' + Surname()"></li>
</ul>

JavaScript

var Property = function() { 
    var self = this;
    self.Name = ko.observable();
    self.Surname = ko.observable();
}

var sortFn = function (a, b) {
    return a.Name().toLowerCase() > b.Name().toLowerCase() ? 1 : -1;
}
    
vm = {};
vm.searchResults = ko.observableArray([]);
vm.sortedInstances = ko.computed(function() { 
    return this.searchResults().sort(sortFn);
}, vm);

vm.searchResults.push(new Property()
                      .Name("Foo")
                      .Surname("FooSurname"));

vm.searchResults.push(new Property()
                      .Name("Bar")
                      .Surname("BarSurname"));
    
ko.applyBindings(vm);

console.log("before sort:");

$.each(vm.searchResults(), function(i, property) { 
   console.log(property.Name());
});

vm.searchResults().sort(sortFn);

console.log("after sort:");

$.each(vm.searchResults(), function(i, property) { 
   console.log(property.Name());
});