2

まず第一に、私は Knockout.js と underscore.js を初めて使用します。これらのライブラリを学習するのは今日が初めてです。タスクは、最初のクリックで列ヘッダーをクリックして昇順で、2 回目のクリックで降順でテーブルを並べ替えることです。

この種の 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 の 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 の 1 つがクリックされている間に要素記述子を取得することは可能ですか? _(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を参照してください。

また、ko.js が提供するため、ここでは underscore.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 に答える