Knockout dynamic css binding in foreach

Question

I'm trying to create an html table grid with server side sorting and paging using knockout.

I based my work on knockout simpleGrid example.

So far it work but I have a problem to bind css class to show which column is selected for sorting.

Here is my code :

html :

<thead>
  <tr data-bind="foreach: columns">
    <th data-bind="text: headerText, click: $parent.sortBy, css:  $parent.sortClass($data)"></th>
  </tr>
</thead>

knockout class :

viewModel: function (configuration) {
  ...
  // Sort properties
  this.sortProperty = configuration.sortProperty;
  this.sortDirection = configuration.sortDirection;
  ...
  this.sortClass = function (data) {
    return data.propertyName == this.sortProperty() ? this.sortDirection() == 'ascending' ? 'sorting_asc' : 'sorting_desc' : 'sorting';
  };
}

My main knockout class :

this.gridViewModel = new ko.simpleGrid.viewModel({
data: self.items,
pageSize: self.itemsPerPages,
totalItems: self.totalItems,
currentPage: self.currentPage,
sortProperty: self.sortProperty, 
sortDirection: self.sortDirection,
columns: [
    new ko.simpleGrid.columnModel({ headerText: "Name", rowText: "LastName", propertyName: "LastName" }),
    new ko.simpleGrid.columnModel({ headerText: "Date", rowText: "EnrollmentDate", propertyName: "EnrollmentDate" })
],
sortBy: function (data) {
    data.direction = data.direction == 'ascending' ? 'descending' : 'ascending';
    self.sortProperty = data.propertyName;
    self.sortDirection = data.direction;

    // Server call
    $.getGridData({
        url: apiUrl,
        start: self.itemStart,
        limit: self.itemsPerPages,
        column: data.propertyName,
        direction: data.direction,
        success: function (studentsJson) {
            // data binding
            self.items(studentsJson.gridData);
        }
    });
},
}

With this, the first time data are bind my css class is correctly apply. But when I click on a column the css class won't update.

Do you have an idea of what I'm doing wrong ?

pax162 pax162 · Accepted Answer · 2013-11-10T09:30:44

The css class will not update because $parent.sortClass($data) means calling the sortClass function only once, when the bindings are first applied. To have it update on click, you can transform sortClass into a computed observable, like in the code below (fiddle: http://jsfiddle.net/ZxEK6/2/)

var Parent = function(){
    var self = this;    
    self.columns = ko.observableArray([
        new Column("col1", self),
        new Column("col2", self),
        new Column("col3", self)
    ]);

}

var Column = function(headerText, parent){
    var self = this;
    self.parent = parent;
    self.sortDirection = ko.observable();
    self.headerText = ko.observable(headerText);
    self.sortClass = ko.computed(function(){
        if (!self.sortDirection()){
            return 'no_sorting';
        }
        return self.sortDirection() == 'ascending' ? 'sorting_asc' : 'sorting_desc';
    },self);

    self.sortBy = function(){
        if (!self.sortDirection()) {
            self.sortDirection('ascending');
        } else if (self.sortDirection() === 'ascending'){
            self.sortDirection('descending');
        } else {
            self.sortDirection('ascending');
        }
    }
}

ko.applyBindings(new Parent())

Knockout dynamic css binding in foreach

1 Answers