带有 AJAX 负载的可排序网格

Question

我正在通过ajax加载一个可观察的数组，连接到一个表，然后向列标题添加排序。它可以工作，但只对随机行进行排序。如果我绕过 ajax 提要并手动声明可观察数组，一切正常。我在这里错过了一些明显的东西吗？

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

你可能想看看淘汰转换。

干杯