sortable grid with knockout with ajax load - ajax

Question

I am loading an observable array via ajax, hooking up to a table and then adding sorting to the column headers. It works but only sorts random rows. If I bypass the ajax feed and manually declare the observable array, all works well. Am I missing something obvious here?
//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);
});
});
//The knockout .js model file
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

You might want to have a look at knockout-transformations.
Cheers