아약스로드가있는 녹아웃으로 정렬 가능한 그리드

Question

아약스를 통해 관찰 가능한 배열을로드하고 테이블에 연결 한 다음 열 머리글에 정렬을 추가합니다. 작동하지만 임의의 행만 정렬합니다. 아약스 피드를 무시하고 수동으로 관찰 가능 배열을 선언하면 모든 것이 잘 작동합니다. 내가 여기서 뭔가 분명한 것을 놓치고 있니?

//The Page 
$(document).ready(function() { 
    var pageModel = function() { 
     var self = this; 
     //Variables and observables 
     self.loading = ko.observable(false); 
     self.searchQuery = ko.observable(""); 
     self.searchCelebrantId = ko.observable(-1); 

     //Models used in page 
     self.celebrantsInstance = ko.observable(new celebrantsModel()); 
     self.marriagesInstance = ko.observable(new marriagesModel()); 

     //var celebrantsInstance = new celebrantsModel(); 
     //var marriageInstance = new singleMarriageModel(1); 

     //Get data 
     self.loadData = function() { 
      return $.when(
      self.celebrantsInstance().loadData() 
      //, self.marriagesInstance().loadData() 
      ); 

     } 

    } 

    var pageInstance = new pageModel({}); 

    pageInstance.loadData() 
      .done(function() { 
       setTimeout(function() { 
        ko.applyBindings(pageInstance); 
        /* Bootstrap select */ 
        $("select").selectpicker(); 
        $("select").addClass('show-menu-arrow').selectpicker('setStyle'); 
       }, 500); 
      }); 

}); 

// 녹아웃의 .js 모델 파일

function marriage(data) { 
     var self = this; 
     self.id = ko.observable(data.Id); 
     self.CelebrantId = ko.observable(data.CelebrantId); 
     self.MarriageDate = ko.observable(data.MarriageDate); 
     self.MarriagePlace = ko.observable(data.MarriagePlace); 
     self.WifeFirstName = ko.observable(data.WifeFirstName); 
     self.WifeMaidenName = ko.observable(data.WifeMaidenName); 
     self.HusbandFirstName = ko.observable(data.HusbandFirstName); 
     self.HusbandSurname = ko.observable(data.HusbandSurname); 
     self.MarriageCertificateNumberToRegistrar = ko.observable(data.MarriageCertificateNumberToRegistrar); 
     self.MarriageCertificateNumberToCouple = ko.observable(data.MarriageCertificateNumberToCouple); 

    } 

    function GetMarriageList(searchQuery) { 
     return $.ajax("/Marriage/GetMarriageList?searchQuery=" + searchQuery, { 
      type: "get" 
     }); 
    };  

    function GetMarriage(id) { 
     return $.ajax("/Marriage/GetMarriage?id=" + id, { 
      type: "get" 
     }); 
    };  

    var marriagesModel = function() {  
     var self = this; 
     self.loading = ko.observable(false); 
     self.searchQuery = ko.observable("a"); 
     self.searchCelebrantId = ko.observable(-1); 
     self.marriages = ko.observableArray([]); 
     self.sortCommand = ko.observable("MarriagePlace asc"); 

     self.headers = [ 
      // { title: 'Marriage Date', sortPropertyName: 'MarriageDate', asc: true }, 
      { title: 'Marriage Place', sortPropertyName: 'MarriagePlace', asc: true }, 
      { title: 'Wife First Name', sortPropertyName: 'WifeFirstName', asc: true }, 
      { title: 'Wife Maiden Name', sortPropertyName: 'WifeMaidenName', asc: true }, 
      { title: 'Husband First Name', sortPropertyName: 'HusbandFirstName', asc: true }, 
      { title: 'Husband Surname', sortPropertyName: 'HusbandSurname', asc: true }, 
      { title: ' Marriage Certificate\nTo Registrar', sortPropertyName: 'MarriageCertificateNumberToRegistrar', asc: true }, 
      { title: 'Marriage Certificate \nTo Couple', sortPropertyName: 'MarriageCertificateNumberToCouple', asc: true }, 
      { title: '' }, 
     ]; 

     self.activeSort = self.headers[0]; //set the default sort 
     self.sort = function (header, event) { 
      //if this header was just clicked a second time 
      if (self.activeSort === header) { 
       header.asc = !header.asc; //toggle the direction of the sort 
      } else { 
       self.activeSort = header; //first click, remember it 
      } 
      var prop = self.activeSort.sortPropertyName; 
      var ascSort = function (a, b) { return a[prop] < b[prop] ? -1 : a[prop] > b[prop] ? 1 : a[prop] == b[prop] ? 0 : 0; }; 
      var descSort = function (a, b) { return a[prop] > b[prop] ? -1 : a[prop] < b[prop] ? 1 : a[prop] == b[prop] ? 0 : 0; }; 
      var sortFunc = self.activeSort.asc ? ascSort : descSort; 
      self.marriages.sort(sortFunc); 
     }; 



     self.loadData = function() { 
      self.loading(true); 
      return GetMarriageList(self.searchQuery()) 
       .done(function (data) { 
        var mappedMarriages = $.map(data, function (item) { 
         return new marriage(item); 
        }); 
        self.marriages(mappedMarriages); 
        self.loading(false); 
       }); 
     } 

     return GetMarriageList(self.searchQuery()) 
      .done(function (data) { 
       var mappedMarriages = $.map(data, function (item) { 
        return new marriage(item); 
       }); 
       self.marriages(mappedMarriages); 
       self.loading(false); 
      }); 


    } 

//HTML Table 
<table id="event-table" class="table table-striped" style="width: 100%; display: none" data-bind="visible: (!loading() && marriages().length > 0)"> 
    <tr data-bind="foreach: headers"> 
     <th data-bind="click: sort, text: title"></th> 
    </tr> 
    <!-- ko foreach: marriages --> 
    <tr> 
     <!--<td style="width: 120px"><span data-bind='html: moment(MarriageDate()).format("DD/MM/YYYY")'></span></td>--> 
     <td><span data-bind='html: MarriagePlace'></span></td> 
     <td><span data-bind='html: WifeFirstName'></span></td> 
     <td><span data-bind='html: WifeMaidenName'></span></td> 
     <td><span data-bind='html: HusbandFirstName'></span></td> 
     <td><span data-bind='html: HusbandSurname'></span></td> 
     <td><span data-bind='html: MarriageCertificateNumberToRegistrar'></span></td> 
     <td><span data-bind='html: MarriageCertificateNumberToCouple'></span></td> 
     <td><a data-bind='attr: { "href": "/Marriage/Edit/" + id }'>Edit</a></td> 
    </tr> 
    <!-- /ko --> 
</table> 

Answer 1

당신은 knockout-transformations 좀보고 할 수 있습니다.

건배