我正在尝试在toggle css class上使用table head。但是，表头已经有一个click binding：我引用了docs here：
默认情况下，我需要在表头(thead)上有一个类，然后在单击该头时添加/删除（切换）该类。目的是使用该类向表头添加可排序的视觉描述：
下面是进行排序的代码：NOTE:此代码和构想是从Ryan Rahlf blog复制而来的。 Article here：
我想可以从排序函数中调用css绑定，以便在单击它们时将其应用于列标题或从列标题中删除：
self.sort = function(header, event){
// This is the existing click binding (sort)
// Place css logic in here so that individual thead class is toggled when clicked.
if(self.activeSort === header) {
header.asc = !header.asc;
} else {
self.activeSort = header;
}
var prop = self.activeSort.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 = self.activeSort.asc ? ascSort : descSort;
self.Artist.sort(sortFunc);
};
Example on JSfiddle：
最佳答案
有很多方法可以做到这一点，但是为了不改变您在此处所做的许多事情，请参见以下方法之一：
function viewModel() {
var self = this;
self.orderedBy = ko.observableArray([]);
self.Artist = ko.observableArray([
{
'LastName': 'Simon',
'FirstName': 'Paul'
}
,
{
'LastName': 'McCartney',
'FirstName': 'Paul'
},
{
'LastName': 'McKnight',
'FirstName': 'Brian'
},
{
'LastName': 'Morrison',
'FirstName': 'Marc'
}]);
self.headers = [
{title: 'First Name', sortPropertyName: 'FirstName', asc: true},
{title: 'Last Name', sortPropertyName: 'LastName', asc:true}
];
self.sort = function(header, event){
self.activeSort = header;
if(self.orderedBy.indexOf(header.title)>=0)
self.orderedBy.remove(header.title);
else
self.orderedBy.push(header.title);
self.activeSort.asc = !self.activeSort.asc;
var prop = self.activeSort.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 = self.activeSort.asc ? ascSort : descSort;
self.Artist.sort(sortFunc);
};
}
ko.applyBindings(viewModel());.ordered{
background-color: yellow;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<table>
<thead>
<tr data-bind="foreach: headers">
<th data-bind="click: sort, text: title, css:{ordered: orderedBy.indexOf(title)>=0}"></th>
</tr>
</thead>
<tbody data-bind="foreach: Artist">
<tr>
<td data-bind="text: FirstName"></td>
<td data-bind="text: LastName"></td>
</tr>
</tbody>
</table>希望有用。