Question

在Knockout.js中，是否可以按多个键进行排序？

例如：

var anotherObservableArray = ko.observableArray([
{ name: "Bungle", type: "Bear" },
{ name: "Boogle", type: "Bear" },
{ name: "George", type: "Hippo" },
{ name: "Zippy", type: "Unknown" }
]);

例如，我可能希望首先按type排序ASC，然后按DESC name排序。这可能与KO可观察数组有关吗？

由于

Answer 1

可观察数组就是：一个可观察的数组。数组按原样排列：按特定顺序排列。如果您要么添加订购的商品，要么对数组进行排序以重新洗牌，它将被订购。

查看observable array documentation：它们支持大多数数组函数，包括排序。 sort function将比较函数作为参数。在此功能中，您可以根据需要比较所需的多个属性。

E.g：

＆＃13;

function ViewModel() {
  var self = this;
  
  self.anotherObservableArray = ko.observableArray([
    { name: "Zippy", type: "Unknown" },
    { name: "Bungle", type: "Bear" },
    { name: "Boogle", type: "Bear" },
    { name: "George", type: "Hippo" }
  ]);

  self.anotherObservableArray.sort(function(a, b) {
    var nameResult = a.name.localeCompare(b.name);
    
    if (nameResult === 0) {
      return a.type.localeCompare(b.type);
    }
    
    return nameResult;
  });
  
}

ko.applyBindings(new ViewModel());

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<ul data-bind="foreach: anotherObservableArray">
  <li data-bind="text: name + ' ' + type"></li>
</ul>

＆＃13;

Answer 2

我通常用这个sortBy方法扩展我的可观察数组，这个方法允许我定义要排序的字段以及排序方向：

ko.observableArray.fn.sortBy = function(fld, direction)
{
    var isDesc = direction && direction.toLowerCase() == 'desc';

    return ko.observableArray(this.sort(function (a, b) {
        a = ko.unwrap(a[fld]);
        b = ko.unwrap(b[fld]);

        return (a == b ? 0 : a < b ? -1 : 1) * (isDesc ? -1 : 1);
        }));
};

然后绑定时：

<div data-bind="foreach: yourArray.sortBy('type', 'asc')">

请参阅Fiddle

Answer 3

是的，您可以实施自己的sorting function。不确定这与您想要的排序完全相同，至少类似。

anotherObservableArray.sort(function(left, right) 
{ 
  return left.name== right.name ? 0 : (left.type< right.type? -1 : 1) 
});

Knockout.js：按多个键排序

3 个答案: