sorting - Knockout

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

by devEngine

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, 1),
        new Instance(2, 2),
        new Instance(3, 9),
        new Instance(4, 9),
        new Instance(5, 4)
       ])
};

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);