sorting - Knockout

http://stackoverflow.com/questions/6965951/knockoutjs-sort

by rniemeyer

HTML

<script src="http://knockoutjs.com/downloads/knockout-2.2.1.js"></script>
<script src="https://rawgithub.com/SteveSanderson/knockout.mapping/master/build/output/knockout.mapping-latest.debug.js"></script>
<h2>Not sorted</h2>
<ul data-bind="template: { name: 'instanceTmpl', foreach: instances }"></ul>

<hr/>

<h2>Sorted</h2>
<ul data-bind="template: { name: 'instanceTmpl', foreach: sortedInstances }"></ul>

<script id="instanceTmpl" type="text/html">
    <li>
        <span data-bind="text: id"></span>
        <input data-bind="value: FirstName" />
    </li>
</script>

CSS

input { width: 75px; }

JavaScript

function Instance(id, name) {
    return {
        id: ko.observable(id),
        FirstName: ko.observable(name)
    };  
}

var viewModel = {
    instances: ko.observableArray([
        new Instance(1, "Zed"),
        new Instance(2, "Jane"),
        new Instance(3, "John"),
        new Instance(4, "Anne"),
        new Instance(5, "Ted")
       ])
};

viewModel.sortFunction = function(a, b) {
        return a.FirstName().toLowerCase() > b.FirstName().toLowerCase() ? 1 : -1;  
};

viewModel.sortedInstances = ko.dependentObservable(function() {
    return this.instances.slice().sort(this.sortFunction);
}, viewModel);
                            
                   
ko.applyBindings(viewModel);