如何在也有现有点击绑定的 table 头上切换 css class？

Question

我正在尝试 toggle css class table head。但是，table header 已经有一个 click binding：我引用了 docs here:

默认情况下，我需要在 table 头 (thead) 上有一个 class，然后当头是 add/remove（切换）class点击。目标是使用 class 向 table 头部添加视觉描述，即 sortable:

下面是执行排序的代码：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

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

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>

希望有用。

如何在也有现有点击绑定的 table 头上切换 css class？

How to toggle css class on a table head which also has an existing click binding?

javascript

jquery

knockout-2.0

knockout.js