2

首先，我是 Knockout.js 和 underscore.js 的新手，这是我学习这些库的第一天。任务是通过在第一次单击时按升序单击列标题，在第二次单击时按降序对表格进行排序。

我有这种 HTML 标记：

<table>
    <thead>
        <tr data-bind="foreach: columnNames">
            <td data-bind="text: $data, click: $root.sortColumn, css: { 'active': $root.currentItem() == $data }"></td>
        </tr>
    </thead>
    <tbody data-bind="foreach: persons">
        <tr>
            <td data-bind="text: name"></td>
            <td data-bind="text: formattedAge"></td>
            <td data-bind="text: sex"></td>
            <td data-bind="text: married"></td>
        </tr>
    </tbody>
</table>

这个 js 代码为 knockout.js：

function personViewModel()
{
    var self = this;
    self.currentItem = ko.observable('');
    self.columnNames = ko.observableArray([
                'Name',
                'Age',
                'Sex',
                'Married'
    ]);
            self.persons = ko.observableArray([...]);
            self.sortColumn = function(item)
    {
        self.currentItem(item);
        var sorted = _(self.persons()).sortBy(item.toLowerCase());
        self.persons(sorted);
    };
};
ko.applyBindings(new personViewModel());

现在的问题是：

是否可以在单击 td 时获取元素描述符，所以我可以在 self.sortColumn 中使用类似“$(this)”的东西？因为现在我可以通过单击适当的列标题对表格进行排序，但我不知道如何标记一个列，它已经被单击（并检查它），使用_(self.persons()).sortBy(item.toLowerCase()).reverse(), 按列的降序对其进行排序。

谢谢：）

4

1 回答 1

1

答案很简单。现在你只保存列名，你还需要有排序方向的变量，你在 sortColumn 中的逻辑是：

 function personViewModel()
 {
     var self = this;
     self.currentItem = ko.observable('');
     self.sortDirection = ko.observable(true);
     self.columnNames = ko.observableArray([
            'Name','Age','Sex','Married'
     ]);
     self.persons = ko.observableArray([
         { name : "John", formattedAge:27, sex:"Male", married:"No"},
         { name : "Bob", formattedAge:30, sex:"Male", married:"Yes"}           
     ]);

     self.sortColumn = function(item)
     {
         if (item == self.currentItem()) {
             self.sortDirection(!self.sortDirection())   
         } else{            
             self.currentItem(item);
             self.sortDirection(true)
         }
         if( self.sortDirection() ) {
             var sorted = _(self.persons()).sortBy(item.toLowerCase());
             self.persons(sorted);
         } else {
             var sorted = _(self.persons()).sortBy(item.toLowerCase()).reverse();
             self.persons(sorted);            
         }
     };
 };

 ko.applyBindings(new personViewModel());

请参阅带有工作示例的jsfiddle 。

另请注意，您实际上并不需要 underscore.js，因为 ko.js 为您提供

myObservableArray.reverse()

myObservableArray.sort()

你需要的一切。

var sortDirection = true
self.sortColumn = function(item) {
   if (item == self.currentItem()) {
      sortDirection = !sortDirection
      self.persons.reverse()
   } else {
      sortDirection = true
      var field = self.currentItem()
      self.persons.sort(function(left, right) { 
           return left[field] == right[field] ? 0 
              : ( left[field]< right[field] ? -1 : 1 ) 
      })
   }
}
于 2013-04-15T13:41:21.660 回答