如何确保一个可剔除的可观测阵列保持排序？

Question

我在observableArray中存储了一个对象数组，每个数组项都是moment.js日期的对象。

{startDate:momentObject, endDate:momentObject, cycle:null}

我需要计算两件事。一个是startDates之间的平均时间。我认为最简单的方法是计算数组中最早的和最近的startDates之间的持续时间，然后除以条目的总数。

我还需要介于2 startDates之间的时间。我想出的一个快速解决方案是这样的：

$.each(dateArray, function(index, item){
    var previousItem = dateArray[index - 1];

    if(previousItem){

      // since these are moment objects, just use the diff method
      return item.cycle = previousItem.startDate.diff(item.startDate, 'days');
    }

    return false;
});

但这将要求按升序对observableArray进行排序。这是我的问题。

1. 如何确保每次向observableArray推送新项时都强制对其排序？
2. 是否有更好的方法来计算startDates和中间周期之间的周期？
3. 也许，我可以在将项添加到数组而不是循环时计算周期？

Answer 1

可以将订阅事件处理程序添加到obervableArray中，如下所示：

self.MyArray = ko.observable([]);
var myArraySubscription = self.MyArray.subscribe(onMyArrayChange);

function onMyArrayChange(){
    //Remove the subscription before sorting, to prevent an infinite loop
    myArraySubscription.dispose();
    myArraySubscription = null;

    //Force a sort of the array here. 
    self.MyArray.sort();//NOTE: You need to define your sorting logic here...this line is just a placeholder

    //Re-subscribe
    myArraySubscription = self.MyArray.subscribe(onMyArrayChange);
}

Answer 2

如果将视图绑定到依赖于日期数组的计算可观测，则每次更新日期数组时，都可以在数组上运行排序逻辑。

this.dateArray = ko.observableArray([]);

this.sortedDates = ko.computed(function() {
    var dates = this.dateArray();

    //... do sorting stuff on dates ...

    return dates;

}, this);

Answer 3

使用Knockout的扩展特性的另一个解决方案是：

  var unwrap = ko.utils.unwrapObservable;

  ko.extenders.sorted = function(target, key) {
    /*

    You may pass in a function, that will be used as the comparison
    function, or a key, that will be used as the attribute upon
    which we will sort.

    The value (unwrapped, if applicable) must have a valueOf() method,
    so we can compare using that.

    */

    var sortFunction;

    if (typeof key === 'function') {
      sortFunction = key;
    } else {
      sortFunction = function(a,b) {
        return unwrap(a[key]) - unwrap(b[key]);
      };
    }

    // We want to prevent our subscription firing when
    // we are already in the process of doing a sort.
    var sorting = false;

    target.subscribe(function sortSubscribe(newValue) {
      if (sorting) {
        return;
      }
      if (target().length > 1) {
        sorting = true;
        // We need to sort the observableArray, not the underlying
        // array. We could do the latter, but then would need to call
        // notifySubscribers() anyway.
        target.sort(sortFunction);
        sorting = false;
      }
    });

    return target;
  };

示例用法是：

foo = ko.observableArray([]).extend({sorted: 'key'})
foo.push({key: 'value1'})
foo.push({key: 'value0'})

foo() --> [{key: 'value0'},{key: 'value1'}]