Нокаут динамический css привязка в foreach

Question

Я пытаюсь создать сетку таблицы html с сортировкой на стороне сервера и пейджингом с использованием нокаута.

Я основывал свою работу на нокауте простойGrid пример.

Пока это работает, но у меня есть проблема с привязкой класса css, чтобы показать, какой столбец выбран для сортировки.

Вот мой код:

HTML:

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

Нокаут класс:

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'; 
    }; 
} 

Мой главный класс Нокаут:

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); 
     } 
    }); 
}, 
} 

При этом, первый раз данные привязывают меня Класс css правильно применяется. Но когда я нажимаю на столбец, класс css не будет обновляться.

У вас есть идея, что я делаю неправильно?

Answer 1

Класс css не будет обновляться, потому что $parent.sortClass($data) означает вызов функции sortClass только один раз, когда привязки сначала применяются. Для его обновления по щелчку, вы можете превратить sortClass в вычисляемом наблюдаемый, как в приведенной ниже коде (скрипка: 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())