jquery - How Can I Sort Observable Array Using Select Box and Knockout and Rebind to List -

i have select drop down box , list of data. drop down box contains names of columns list of data. list of data bound observable array called allcertificates. when user selects column name drop down box change event fired. want sort list of data based on selection drop down list. plan on sorting allcertificates observable array in sortby function , rebind list of data, not know how implement this. should code sortby function?

here select list in view code (caapproval.html)-

    <select id="ddlsortby" style="margin-top: 0px; height: 24px; width: 140px !important"         data-bind="change: sortby(), options: serveroptions, optionstext: 'name', optionsvalue: 'id', value: 'optiontext'">     </select> 

here list of data bound allcertificates observable array-

                        <ol data-bind="foreach: allcertificates">                         <table id="table2" border="0" class="table table-hover" width="100%">                             <tr style="cursor: hand">                                 <td>                                     <ul style="width: 100%">                                         <b><span data-bind="    text: clientname"></span>&nbsp;(<span data-bind="    text: clientnumber"></span>)&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span data-bind="    text: borrowbasecount"></span>&nbsp;loan(s)&nbsp;</b>                                         <br />                                         collateral analyst:&nbsp;<span data-bind="    text: username"></span>                                         <br />                                         certificate:&nbsp;<span data-bind="text: lwcertid"></span>&nbsp;&nbsp;request&nbsp;date:&nbsp;<span data-bind="    text: moment(requestdate).format('dd/mmm/yyyy')"></span>                                 </td>                             </tr>                         </table> 

here viewmodel code empty sortby function (sortby want sort observable array , re-bind list of data)-

define(['services/logger', 'durandal/system', 'durandal/plugins/router', 'services/certificatedataservice'], function (logger, system, router, certificatedataservice) {     var allcertificates = ko.observablearray();     var mycertificates = ko.observablearray();      var serveroptions = [     { id: 1, name: 'certificate', optiontext: 'lwcertid' },     { id: 2, name: 'client name', optiontext: 'clientname' },     { id: 3, name: 'client number', optiontext: 'clientnumber' },     { id: 4, name: 'request date', optiontext: 'requestdate' },     { id: 4, name: 'collateral analyst', optiontext: 'username' }     ];      var activate = function () {          // go local data, if have         return selectallcerts();      };       var vm = {         activate: activate,         allcertificates: allcertificates,         mycertificates: mycertificates,         title: 'certificate approvals',         selectmycerts: selectmycerts,         selectallcerts: selectallcerts,         defaultmycert: defaultmycert,         theoptionid: ko.observable(1),         serveroptions: serveroptions,         sortby: sortby     };       return vm;       function sortupdownallcerts() {         return allcertificates.sort()     }      function sortupdownmycerts() {         return allcertificates.sort()     }      //*****what code goes here?     function sortby() {         if (serveroptions[$('#ddlsortby').val()] != undefined) {          }     }      function defaultmycert() {         return $('#btnmycert').toggle('show');     }      function selectallcerts() {         return certificatedataservice.getallcertificates(allcertificates);     }      function selectmycerts() {         return certificatedataservice.getallcertificates(mycertificates);     } }); 

what should sortby function code be?

---

edit:

progress (thanks damien!), need little more info. have subscribing on serverselectedoptionid, , can see data in function(a, b) along correct value in sortcriteriaid. missing how use sortcriteriaid specifiy column sort on. here new code-

       serverselectedoptionid.subscribe(function () {         var sortcriteriaid = serverselectedoptionid._latestvalue;         allcertificates.sort(function (a, b) {             if (a[sortcriteriaid] == b[sortcriteriaid]) {                 return a[sortcriteriaid] > b[sortcriteriaid] ? 1 : a[sortcriteriaid] < b[sortcriteriaid] ? -1 : 0;             }              return a[sortcriteriaid] > b[sortcriteriaid] ? 1 : -1;          });     }); 

here model allcertificates array-

     function (logger, system) {     var certificatemodel = function (clientid, lwcertid, requestdate, username, statusdescription, statuscode, statusdesc, ceousername, clientname, clientnumber, borrowbasecount, advrequestcount) {         var self = this;         self.clientid = ko.observable(clientid);         self.lwcertid = ko.observable(lwcertid);         self.requestdate = ko.observable(requestdate);         self.username = ko.observable(username);         self.statusdescription = ko.observable(statusdescription);         self.statuscode = ko.observable(statuscode);         self.statusdesc = ko.observable(statusdesc);         self.ceousername = ko.observable(ceousername);         self.clientname = ko.observable(clientname);         self.clientnumber = ko.observable(clientnumber);         self.borrowbasecount = ko.observable(borrowbasecount);         self.advrequestcount = ko.observable(advrequestcount);     }; 

of course a[sortcriteriaid] not work. 1 of columns lwcertid. code use sortcriteriaid represent a.lwcertid if lwcertid option 1 (sortcriteriaid = 1)?

corrected code edit (this last piece , works)-

        serverselectedoptionid.subscribe(function () {         var sortcriteriaid = serverselectedoptionid._latestvalue;         allcertificates.sort(function (a, b) {             var fieldname = serveroptions[sortcriteriaid-1].optiontext;              if (a[fieldname] == b[fieldname]) {                 return a[fieldname] > b[fieldname] ? 1 : a[fieldname] < b[fieldname] ? -1 : 0;             }              return a[fieldname] > b[fieldname] ? 1 : -1;          });     }); 

this not way should code knockout :

 serveroptions[$('#ddlsortby').val()] != undefined); 

you should create ko.observable named serverselectedoptionid in viewmodel. change select binding :

data-bind="value : serverselectedoptionid , options: serveroptions, optionstext: 'name', optionsvalue: 'id', value: 'optiontext'" 

so can subscribe on serverselectedoptionid :

serverselectedoptionid .subcribe(function(){     var sortcriteriaid = this.serverselectedoptionid();     allcertificates.sort(function(a,b){           // use sortcriteriaid return -1,0 or 1     });         }); 

if need explanation consider create fiddle.

i hope helps.