使用underscore.js和knockout.js創建並按列排序

首先，我是Knockout.js和underscore.js的新手，這是我學習這些庫的第一天。其任務是通過在第一次點擊時按升序對列表進行排序，並在第二次點擊時以降序對其進行排序。使用underscore.js和knockout.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()以列的降序對其進行排序。

謝謝:)

來源

2013-04-15 Kamilius

添加click事件的td's（使用的TD一commonn類）。現在增加一個回調函數此事件在JS這將做你的工作，喜歡彰顯各自的TD（通過改變顏色或樣式） – dreamweiver

答案很簡單。現在你只保存列名，你也需要有排序方向變化，和你在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-15 13:41:21 vittore

感謝您的幫助，我明白了:) – Kamilius