javascript - Knockout.js:如何对表进行排序？

Question

我使用这个例子:

http://stevescodingblog.co.uk/real-time-system-resource-monitor-with-signalr-mvc-knockout-and-webapi/#comment-3293

表格显示可观察数组。该数组由客户端通过信号器更新。一切正常。我想添加按所选列排序。

<div id="computerInfo">

<h2>Real-time System Resource Monitor</h2>
<h5 data-bind="visible: connected">Connected to message hub</h5>

<table border="0" class="table table-striped">
    <tr>
        <th>Machine</th>
        <th>CPU %</th>
        <th>Memory Available (Mb)</th>
        <th>Total Memory (Mb)</th>
        <th>Mem Available %</th>
    </tr>

    <!-- ko foreach: machines -->
    <tr data-bind="css: { highCpu: cpu() > 90 || memPercent()<30 }">
        <td data-bind="text: machineName"></td>
        <td data-bind="text: cpu"></td>
        <td data-bind="text: memUsage"></td>
        <td data-bind="text: memTotal"></td>
        <td data-bind="text: memPercent"></td>
    </tr>
    <!-- /ko -->

</table>

$(function () {

    // The view model that is bound to our view
    var ViewModel = function () {
        var self = this;

        // Whether we're connected or not
        self.connected = ko.observable(false);

        // Collection of machines that are connected
        self.machines = ko.observableArray();

        self.headers = [
                            { title: 'Machine Name', sortKey: 'keyMachineName' },
                            { title: 'CPU', sortKey: 'keyCpu' },
                            { title: 'Mem Usage', sortKey: 'keyMemUsage' },
                            { title: 'Mem Total', sortKey: 'keyMemTotal' },
                            { title: 'Mem Percent', sortKey: 'keyMemPercent' }
        ];
        self.sort = function (header, event) {
            var sortKey = header.sortKey;
            //implementation of sort
        };
        self.sort = function (header, event) {
            var sortKey = header.sortKey;
            switch (sortKey) {
                case 'keyMachineName':
                    self.machines.sort(function (a, b) {
                        var n = a.machineName < b.machineName ? -1 : a.machineName > b.machineName ? 1 : 0;
                        alert(n);
                        return n;//1;
                    });
                    break;
                case 'keyCpu':
                    self.machines.sort(function (a, b) {
                        var n = a.cpu < b.cpu ? -1 : a.cpu > b.cpu ? 1 : 0;
                        alert(n);
                        return n;
                    });
                    break;
                case 'keyMemUsage':
                    self.machines.sort(function (a, b) {
                        var n = a.memUsage < b.memUsage ? -1 : a.memUsage > b.memUsage ? 1 : 0;
                        alert(n);
                        return n;
                    });
                    break;
            }
        };
    };

    // Instantiate the viewmodel..
    var vm = new ViewModel();

    // .. and bind it to the view
    //ko.applyBindings(vm, $("#computerInfo")[0]);

    // Get a reference to our hub
    var hub = $.connection.cpuInfo;

    // Add a handler to receive updates from the server
    hub.client.cpuInfoMessage = function (machineName, cpu, memUsage, memTotal) {

        var machine = {
            machineName: machineName,
            cpu: cpu.toFixed(0),
            memUsage: (memUsage / 1024).toFixed(2),
            memTotal: (memTotal / 1024).toFixed(2),
            memPercent: ((memUsage / memTotal) * 100).toFixed(1) + "%"
        };

        var machineModel = ko.mapping.fromJS(machine);

        // Check if we already have it:
        var match = ko.utils.arrayFirst(vm.machines(), function (item) {
            return item.machineName() == machineName;
        });

        if (!match) {
            vm.machines.push(machineModel);
        } else {
            var index = vm.machines.indexOf(match);
            vm.machines.replace(vm.machines()[index], machineModel);
        }

       // vm.machines.sort();


        //ko.applyBindings(vm, $("#computerInfo")[0]);

        //$("#infoTable").tablesorter({sortList: [0,0]});
    };

    ///


    ko.applyBindings(vm, $("#computerInfo")[0]);
    ///
    // Start the connectio
    $.connection.hub.start().done(function () {
        vm.connected(true);
    });
});

问题是:sort 函数始终返回 0，即值始终相同:

var n = a.machineName < b.machineName

当我测试返回 1 时，排序工作正常。

Answer 1

当您使用创建机器时

var machineModel = ko.mapping.fromJS(machine);

您创建一个具有可观察属性的 View 模型。在这种情况下，在排序方法中，您需要将它们视为可观察量，因此必须使用括号来使用它们。例如:

case 'keyMachineName':
    self.machines.sort(function (a, b) {
        var n = a.machineName() < b.machineName() ? -1 : a.machineName() > b.machineName() ? 1 : 0;
        alert(n);
        return n;//1;
    });
break;