Sorting a table in Knockout JS with arrows

Question

I'm creating a sortable table with KnockoutJS. The table works fine, but I'd like for an upwards arrow to appear next to the column header when a user clicks on that particular header. Click again, and the upwards arrow should face down. To begin with, the arrow should be facing up on the "Age" column.

Right now, no arrows are appearing. What's causing this to happen in my code?

HTML:

<table>
<thead>
<tr data-bind="foreach: headers">
<td data-bind="click: $parent.sort, text: title">
    <span data-bind="if: arrowDown"> v </span>
    <span data-bind="if: arrowUp"> ^ </span>
</td>
</tr>
</thead>

Knockout:

var viewModel = function(){
    var self = this;
    self.people = ko.observableArray([
        {firstName:'James',lastName:'Smith',age:38},
        {firstName:'Susan',lastName:'Smith',age:36},
        {firstName:'Jeremy',lastName:'Smith',age:10},
        {firstName:'Megan',lastName:'Smith',age:7},
        {firstName:'James',lastName:'Jones',age:40},
        {firstName:'Martha',lastName:'Jones',age:36},
        {firstName:'Peggy',lastName:'Jones',age:10}
    ]);
    self.headers = [
        {title:'First Name',sortPropertyName:'firstName', asc:true, arrowDown: false, arrowUp: false},
        {title:'Last Name',sortPropertyName:'lastName', asc:true, arrowDown: false, arrowUp: false},
        {title:'Age',sortPropertyName:'age', asc:true, arrowDown: false, arrowUp: true}
    ];

    self.activeSort = self.headers[2];

    self.sort = function(header, event){
        if(self.activeSort === header) {
        header.asc = !header.asc;
        header.arrowDown = !header.arrowDown;
        header.arrowUp = !header.arrowUp;
        } else {
        self.activeSort.arrowDown = false;
        self.activeSort.arrowUp = false;
        self.activeSort = header;
        header.arrowDown = true;
        }
        var prop = header.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 = header.asc ? ascSort : descSort;
        self.people.sort(sortFunc);
    };
};

ko.applyBindings(new viewModel());

Answer 1

Make your sort properties on the header items observable, knockout will not update the UI if you change normal javascript values.

ie

self.headers = [ { 
    title: 'First Name', 
    sortPropertyName: 'firstName',
    asc: ko.observable(true),
    arrowDown: ko.observable(false),
    arrowUp: ko.observable(false)
}, ... ];

When you set this from sort function knockout will now update the UI.