JSFiddle - React, Tailwind, and code Playground

by edelvyncarl_seraspe

HTML

<script src="https://rawgithub.com/SteveSanderson/knockout.mapping/master/build/output/knockout.mapping-latest.debug.js"></script>
<script src="https://knockoutjs.com/downloads/knockout-2.2.1.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" />
        <input data-bind="value: dob" />
    </li>
</script>

CSS

input { width: 75px; }

JavaScript

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

var viewModel = {
    instances: ko.observableArray([
        new Instance(-1, "Ted", new Date('01/23/2019'), 0),
        new Instance(1, "Anne", new Date('01/22/2019'), 0),
        new Instance(1, "John", new Date('01/21/2019'), 0),
				new Instance(-1, "Jane", new Date('01/19/2019'), 0),
        new Instance(1, "Zed", new Date('01/20/2019'), 0)
       ])
};

viewModel.sort_timestamp = function(a, b){
    //return ($(b).data('position')) < ($(a).data('position')) ? 1 : -1;    
    var sorting = 0;
    
    if(a.id() > 0) {
    	return a.dob().getTime() < b.dob().getTime() ? -1 : 1;		
    }
    
}

viewModel.sortFunction = function(a, b) {
 			 var sorting = 0;
        
       if(a.id() < b.id()) {
        	 sorting = 1;
       } else sorting = -1;
                           
                           
			if(b.id() < a.id()) {
        	 sorting = -1;
       } else sorting = 1;
       
       return sorting;       
};

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