knockout.js排序的可观察数组

Question

我想有一个可观察数组，它将在对象被推入时自行排序（如果它将在比较器中使用的任何值进行排序，它会更好功能已更改）。

的东西，你可以定义你想要的数组进行排序，然后每次推送被调用时它会如此的排列还是保持有序的推对象添加到正确的位置在数组中，喜欢比较器功能：

var sortedArray = ko.sortedObservableArray(
    function (a,b) { return b - a;}, 
    [1,7,4] 
); // sortedArray will be [1,4,7] 
sortedArray.push([5,2]); // sortedArray will now be [1,2,4,5,7] 

是否有任何图书馆会为我做这件事，如果没有，最好的方法是什么去实现呢？

Answer 1

我最终通过延长淘汰赛观察到阵列创建一个分类观察到的数组：

ko.sortedObservableArray = function (sortComparator, initialValues) { 
    if (arguments.length < 2) { 
     initialValues = []; 
    } 
    var result = ko.observableArray(initialValues); 
    ko.utils.extend(result, ko.sortedObservableArray.fn); 
    delete result.unshift; 
    result.sort(sortComparator); 
    return result; 
}; 

ko.sortedObservableArray.fn = { 
    push: function (values) { 
     if (!$.isArray(values)) { 
      values = [values]; 
     } 
     var underlyingArray = this.peek(); 
     this.valueWillMutate(); 
     underlyingArray.push.apply(underlyingArray, values); 
     underlyingArray.sort(this.sortComparator); 
     this.valueHasMutated(); 
    }, 
    sort: function (sortComparator) { 
     var underlyingArray = this.peek(); 
     this.valueWillMutate(); 
     this.sortComparator = sortComparator; 
     underlyingArray.sort(this.sortComparator); 
     this.valueHasMutated(); 
    }, 
    reinitialise: function (values) { 
     if (!$.isArray(values)) { 
      values = [values]; 
     } 
     var underlyingArray = this.peek(); 
     this.valueWillMutate(); 
     underlyingArray.splice(0, underlyingArray.length); 
     underlyingArray.push.apply(underlyingArray, values); 
     underlyingArray.sort(this.sortComparator); 
     this.valueHasMutated(); 
    }, 
    reverse: function() { 
     var underlyingArrayClone = this.peek().slice(); 
     underlyingArrayClone.reverse(); 
     return underlyingArrayClone; 
    } 
}; 

可在下列方式使用：

var sortedArray = ko.sortedObservableArray(
    function (a,b) { return a - b;}, 
    [1,7,4] 
); // sortedArray will be [1,4,7] 
sortedArray.push([5,2]); // sortedArray will now be [1,2,4,5,7] 
sortedArray.sort(function (a,b){ 
    return b - a; 
}); // sortedArray will now be [7,5,4,2,1] 
sortedArray.push(6); // sortedArray will now be [7,6,5,4,2,1] 

我唯一的问题是，重新初始化时使用新数组排序的observable数组的方式与重新初始化可观察数组的排序后的observable数组没有进行排序相同。为了解决这个问题，我在已排序的可观察阵列上添加了一个重新初始化函数：

var sortedArray = ko.sortedObservableArray(
    function (a,b) { return a - b;}, 
    [1,7,4] 
); // sortedArray will be [1,4,7] 

sortedArray([3,2,8]); // this doesn't work correctly, sortedArray will be [3,2,8] 
// instead of [2,3,8] 

// To get around this you can use reinitialise() 
sortedArray.reinitialise([3,2,8]); // sortedArray will be [2,3,8] 

Answer 2

试试这个：

var sortedArray = ko.observableArray(); 
sortedArray.subscribe(function() { 
    if (!sortedArray._isSorting) { 
     sortedArray._isSorting = true; 
     sortedArray.sort(function (a, b) { return b - a; }); 
     sortedArray._isSorting = false; 
    } 
}); 

您可以在一个功能包装这件事，只要你想创造新的分类观察到的阵列。