javascript - 如何在也有现有点击绑定(bind)的表头上切换 css 类？

Question

我正在尝试在表头上切换CSS类。但是，表头已经有一个点击绑定(bind):我引用了 docs here :

默认情况下，我需要在表头上有一个类(thead)，然后在单击表头时添加/删除(切换)该类。目标是使用该类向可排序的表头添加视觉描述:

下面是进行排序的代码: 注意: 此代码和想法复制自 Ryan Rahlf blog 。 Article here :

我认为可以从排序函数调用 css 绑定(bind)，以便在单击列头时应用或删除它:

    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

有很多方法可以做到这一点，但为了不改变您在此处所做的许多事情，请参阅其中一种方法的片段:

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>

希望有用。