Knockout.js : 여러 개의 키로 정렬

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

나는 보통 나뿐만 아니라 정렬 방향을 기준으로 정렬 할 필드를 정의 할 수 있습니다이 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 2

예, 당신은 당신이 sorting function을 소유 구현할 수있다. 이것이 정확히 당신이 원하는 것과 똑같은 정렬인지는 모르지만 적어도 비슷한 점이 있습니다.

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

Answer 3

관찰 가능한 배열은 관찰 할 수있는 배열입니다. 배열은 그대로 있습니다 : 특정 순서로. 정렬 된 항목을 추가하거나 배열을 다시 정렬하면 정렬됩니다.

observable array documentation을 살펴보십시오. 정렬을 포함하여 대부분의 배열 기능을 지원합니다. sort function은 비교 함수를 인수로 취합니다. 이 기능에서는 원하는만큼의 속성을 원하는대로 비교할 수 있습니다.

예 :

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());

<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>