更新數據時保留和提示排序順序？

Question

更新模型中的數據時，是否可以保留排序順序（最後是jsfiddle）？我有以下的標記：現在

<table> 
    <thead> 
    <tr> 
     <th data-bind="sort: { arr: Records, prop: 'Name' }">Name</th> 
     <th data-bind="sort: { arr: Records, prop: 'Number' }">Number</th> 
     <th data-bind="sort: { arr: Records, prop: 'Desc' }">Description</th> 
    </tr> 
    </thead> 
    <tbody data-bind="foreach: Records"> 
    <tr> 
     <td data-bind="text: Name"></td> 
     <td data-bind="text: Number"></td> 
     <td data-bind="text: Desc"></td> 
    </tr> 
    </tbody> 
</table> 
<button data-bind="click: changeMe">Remove</button> 
<button data-bind="click: resetMe">Reset</button> 

，那種本身使用bindingHandlers從這個original post實現：

var recs = []; 

ko.bindingHandlers.sort = { 
    init: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) { 
     var asc = false; 
     element.style.cursor = 'pointer'; 

     element.onclick = function(){ 
      var value = valueAccessor(); 
      var prop = value.prop; 
      var data = value.arr; 

      asc = !asc; 
      if(asc){ 
       data.sort(function(left, right){ 
        return left[prop] == right[prop] ? 0 : left[prop] < right[prop] ? -1 : 1; 
       }); 
      } else { 
       data.sort(function(left, right){ 
        return left[prop] == right[prop] ? 0 : left[prop] > right[prop] ? -1 : 1; 
       }); 
      } 
     } 
    } 
}; 

function ViewModel(){ 
    var self = this; 
    self.Records = ko.observableArray(); 

    self.changeMe = function() { 
     self.Records.pop() 
    } 

    self.resetMe = function() { 
     var recs = [] 
     recs.push({Name: 'Bob', Number: 1, Desc: 'I am awesome'}); 
     recs.push({Name: 'Joe', Number: 2, Desc: 'Another description'}); 
     recs.push({Name: 'Mitch', Number: 3, Desc: 'Something'}); 
     recs.push({Name: 'Steven', Number: 4, Desc: 'Yo'}); 
     self.Records(recs); 
    } 
} 

var viewModel = new ViewModel(); 
recs.push({Name: 'Bob', Number: 1, Desc: 'I am awesome'}); 
recs.push({Name: 'Joe', Number: 2, Desc: 'Another description'}); 
recs.push({Name: 'Mitch', Number: 3, Desc: 'Something'}); 
recs.push({Name: 'Steven', Number: 4, Desc: 'Yo'}); 
recs.push({Name: 'Robin', Number: 6, Desc: 'Hello'}); 
recs.push({Name: 'Batman', Number: 7, Desc: 'Description'}); 
recs.push({Name: 'John', Number: 5, Desc: 'Ok'}); 
viewModel.Records(recs); 
ko.applyBindings(viewModel); 

例如，考慮這個JSFiddle和下面的一系列交互：

• 單擊一列以便行按該列排序。點擊「數字」兩次，以降序排序。
• 現在，點擊「重置」模擬ajax調用（即，假設我正在更新模型）。現在，排序順序恢復到原始狀態。

我該如何保存排序順序，即記住它應該按降序排序的事實？當然，在列的旁邊以某種方式顯示它？類似於datatables的操作方式（請注意每個列名旁邊的向上和向下箭頭）。

有什麼建議嗎？

Answer 1

做了一個嘗試，但應該有更好的方法。

重點是我做了'dataUpdated'標誌，所以每次數據更新時，都要對它們進行排序。 另外，我認爲在可觀察到的物體的「道具」和「秩序」，所以你也可以做的東西時，他們改變（例如具有一個箭頭圖標，並改變它按順序）

檢查出來

- >http://jsfiddle.net/blackjim/xgEdg/15/

var recs = []; 
ko.bindingHandlers.changed = { 
    update: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) { 

     if(viewModel.dataUpdated()){ 
      console.log('data updated, sorting...'); 
      sortThis(viewModel.Records,viewModel.sortData().order,viewModel.sortData().col); 
     } 
     viewModel.dataUpdated(false); 
    } 
} 

ko.bindingHandlers.sort = { 
    init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) { 
     var order = 'none'; // initial order status for this column 

     if(!viewModel.Records.dataSort){ 
      viewModel.Records.dataSort = { col: 'none', order: 'none' }; 
     } 

     element.style.cursor = 'pointer'; 
     element.sortAsc = element.sortAsc || false; 

     element.onclick = function() { 
      var value = valueAccessor(), 
       prop = value.prop, 
       data = value.arr; 

      // sortData updated 
      viewModel.sortData({ 
       col: prop, 
       order: order = (order === 'asc' ? 'desc' : 'asc') 
      }); 

      sortThis(data, order, prop); 
     } 
    } 
}; 

// function for sorting the observable array 
function sortThis(data, order, prop){ 

    if (order === 'asc') { 
     data.sort(function (left, right) { 
      return left[prop] == right[prop] ? 0 : left[prop] < right[prop] ? -1 : 1; 
     }); 
    } else { 
     data.sort(function (left, right) { 
      return left[prop] == right[prop] ? 0 : left[prop] > right[prop] ? -1 : 1; 
     }); 
    } 
} 

function ViewModel() { 
    var self = this; 

    self.Records = ko.observableArray(); 
    self.sortData = ko.observable({ 
     col: "none", 
     order: "none" 
    }); 
    self.dataUpdated = ko.observable(false); // flag for data updating 

    self.changeMe = function() { 
     self.Records.pop(); 
    } 

    self.resetMe = function() { 

     self.Records.removeAll(); 
     self.Records.push({ 
      Name: 'Bob', 
      Number: 1, 
      Desc: 'I am awesome' 
     }); 
     self.Records.push({ 
      Name: 'Joe', 
      Number: 2, 
      Desc: 'Another description' 
     }); 
     self.Records.push({ 
      Name: 'Mitch', 
      Number: 3, 
      Desc: 'Something' 
     }); 
     self.Records.push({ 
      Name: 'Steven', 
      Number: 4, 
      Desc: 'Yo' 
     }); 
     // trigger the dataUpdated 'event' 
     self.dataUpdated(true); 

    } 
} 

var viewModel = new ViewModel(); 

recs.push({ 
    Name: 'Bob', 
    Number: 1, 
    Desc: 'I am awesome' 
}); 
recs.push({ 
    Name: 'Joe', 
    Number: 2, 
    Desc: 'Another description' 
}); 
recs.push({ 
    Name: 'Mitch', 
    Number: 3, 
    Desc: 'Something' 
}); 
recs.push({ 
    Name: 'Steven', 
    Number: 4, 
    Desc: 'Yo' 
}); 
recs.push({ 
    Name: 'Robin', 
    Number: 6, 
    Desc: 'Hello' 
}); 
recs.push({ 
    Name: 'Batman', 
    Number: 7, 
    Desc: 'Description' 
}); 
recs.push({ 
    Name: 'John', 
    Number: 5, 
    Desc: 'Ok' 
}); 
viewModel.Records(recs); 
ko.applyBindings(viewModel);