如何在也具有现有点击绑定的表头上切换 css 类？

Question

我正在尝试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:

Answer 1

有很多方法可以做到这一点，但为了不改变你在这里所做的很多事情，请参阅 sn-p 方法之一：

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>

希望有用。