如何使用選擇框和敲除重新排列可觀察陣列

Question

我有一個選擇下拉框和一個數據列表。下拉框中包含數據列表的列名稱。該數據列表綁定到名爲allCertificates的可觀察數組。當用戶從下拉框中選擇列名稱時，更改事件被觸發。我想根據下拉列表中的選擇對數據列表進行排序。我打算在SortBy函數中對allCertificates可觀察數組進行排序，並將其重新綁定到數據列表，但我不知道如何實現這一點。 SortBy函數的代碼應該是什麼？

這裏是我的視圖代碼（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> 

這裏是綁定到allCertificates觀察到的基於陣列

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

下面是數據列表我的視圖模型代碼與空SortBy函數（SortBy是我想排序可觀察數組並重新綁定到數據列表的地方） -

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 get local data, if we have it 
     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); 
    } 
}); 

SortBy函數代碼應該是什麼？

---

編輯：

進展（感謝達米安！），但需要多一點的信息。我讓它在serverSelectedOptionID上訂閱，我可以看到函數（a，b）中的數據以及sortCriteriaID中的正確值。我缺少的是如何使用sortCriteriaID來指定要排序的列。這是新代碼 -

 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; 

     }); 
    }); 

這裏是型號爲allCertificates基於陣列

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

當然的[sortCriteriaID]不起作用。其中一列是lwCertID。如果lwCertID爲選項1（sortCriteriaID = 1），那麼代碼將如何使用sortCriteriaID來表示a.lwCertID？

更正後的代碼編輯（這是最後一塊和它的作品） -

 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; 

     }); 
    }); 

Answer 1

這不是你應該敲代碼的方式：

serverOptions[$('#ddlSortBy').val()] != undefined); 

您應該創建一個ko.observable在viewModel中命名爲serverSelectedOptionID。 然後改變的選擇結合成：如果你需要解釋考慮創建一個小提琴

serverSelectedOptionID .subcribe(function(){ 
    var sortCriteriaID = this.serverSelectedOptionID(); 
    allCertificates.sort(function(a,b){ 
      // use sortCriteriaID to return -1,0 or 1 
    });   
}); 

：

data-bind="value : serverSelectedOptionID , options: serverOptions, optionsText: 'name', optionsValue: 'id', value: 'OptionText'" 

所以，現在你可以在serverSelectedOptionID訂閱。

我希望它有幫助。