In Knockout.js, how to sort array

Question

In the ViewModel i have an observableArray and a computed which return the array managed in the view:

var operators = ko.observableArray([]);
    var records = ko.computed(function () {
        return operators();
    });

This is my sort method;

Order = function (data, event, colName) {
            var th = $('#th-' + colName),
                attr = th.data('sort');

            setAttribute(th, attr); //switch data-sort between 'asc' and 'desc'

            if (attr === 'asc') {
                operators = operators.sort(function (a, b) {
                    return (a.fullname === b.fullname) ? 0 : (a.fullname < b.fullname ? -1 : 1);
                });
            }
            else {
                operators = operators.sort(function (a, b) {
                    return (a.fullname === b.fullname) ? 0 : (a.fullname > b.fullname ? -1 : 1);
                });
            }
        };

And this is the view:

<table id="table-hour">
    <thead>
        <tr>
            <th data-bind="click: function(data, event) { Order(data, event, 'fullname')}" data-sort="asc" id="th-fullname">Fullname</th>
        </tr>
    </thead>
    <tbody>
        <!-- ko foreach: records -->
        <tr>
            <td>
                <span data-bind="text: fullname"></span>
            </td>
        </tr>    
        <!-- /ko -->
    </tbody>

Well, the sort function work like a charm, in fact debugging with the browser i can see the array sorted in both ways, but the view is updated only the first time. What should I do to fix this problem?

Rene Pot · Accepted Answer · 2012-11-22 09:37:10Z

3

The problem is, you need to update the observableArray, and put the data back in that array.

A view doesn't update, if the observable isn't updated

Take a look at the JavaScript sort functionality ( https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Array/sort).

answered Nov 22, 2012 at 9:37

Rene Pot

24.8k7 gold badges70 silver badges92 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

tommy Over a year ago

Yes, you're right. I was doing it in the wrong way. Instead of operators = operators.sort(...) it's sufficient to call the sort utility on the observableArray: if (attr === 'asc') { operators.sort(function (a, b) {...}); }

Collectives™ on Stack Overflow

In Knockout.js, how to sort array

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related