정렬 및 Foreach 데이터 바인딩이있는 녹아웃 관찰 가능 배열

Question

녹아웃 관측 가능 배열에 연결되는 개체 배열이 있습니다. 이 배열에 정렬을 적용 할 필요가 있었고 조금 혼란스러운 행동이있었습니다.

첫 번째 시도는 foreach 데이터 바인딩에 정렬을 적용하는 것과 관련이 있습니다.
http://jsfiddle.net/wnfXV/

<ul data-bind="foreach: people.sort(function(l,r) { return l.name == r.name ? 0 : (l.name < r.name ? -1 : 1)})">

이 적절한 정렬을 수행하지만 동적으로 추가/배열에서 요소를 제거하고 DOM 업데이트를 할 수있는 능력을 잃게

.

기본 JavaScript 배열에 액세스하기 위해 괄호 세트를 추가하면 모든 것이 잘 동작합니다. 내가 찾은 일부 SO 답변을 바탕으로

<ul data-bind="foreach: people().sort(function(l,r) { return l.name == r.name ? 0 : (l.name < r.name ? -1 : 1)})">

, 나는 정렬 된 배열에 대한 계산 관찰을 만들기까지했다. http://jsfiddle.net/wnfXV/2/

self.sortedPeople = ko.computed(function() { 
    return self.people().sort(function(l,r) { 
     return l.name == r.name ? 0 : (l.name < r.name ? -1 : 1); 
    }); 
}); 

이것은 또한 작동합니다. 그리고 나는 즉시 실행되기 때문에 계산 된 관찰 가능에 데이터 바인딩 할 필요조차 없습니다. 배열 항목 및 DOM 업데이트를 적절히 푸시 및 제거 할 수 있습니다. 나는에 코드를 변경하는 경우

그러나 : 이제

self.sortedPeople = ko.computed(function() { 
    return self.people.sort(function(l,r) { 
     return l.name == r.name ? 0 : (l.name < r.name ? -1 : 1); 
    }); 
}); 

, 나는 어레이와 DOM 업데이트 항목을 밀어 수 있어요,하지만 데이터 정렬되지 않습니다.

이 차이점은 녹아웃 종속성 추적과 관측 가능한 배열에서 작동하는 것과 기본 JavaScript 배열에서의 차이점과 관련이 있다고 생각합니다. 그러나 동작이 왜 변하는지를 개념화하는 데 어려움을 겪고 있습니다. 나는 그것을 작동시킬 수 있지만, 모범 사례로 간주되는 것에 대해서도 궁금합니다.

도움 주셔서 감사합니다. :)

Answer 1

JS Fiddle에서는 foreach가 사람들에게 묶여 있기 때문에 ... sortedPeople이 아닙니다.

처음으로 계산 된 이유는 계산이 한 번 실행되었지만 구독하지 않았기 때문입니다.

그러나 기본 배열에서 일부 구독으로 인해 괄호를 사용하면 계산이 다시 실행됩니다.

편집 : 당신은 괄호를 사용하면 관측이 호출 될 때

는, 계산 된 배열에 가입됩니다. 가입 된 항목이 변경되면 계산이 다시 실행됩니다. 이 방법 와 가 observableArray.sort 배열에 의존을 설정하지 않기 때문에보기에 종류를 사용에

Answer 2

문제는 실제로 KO 권장되지 않으므로 바인딩은 업데이트되지 않습니다.당신이 그것을 작동하게하려면

그래서 하나
https://github.com/knockout/knockout/issues/1380

바이올린에 대한 상세한 설명을 위해

items.slice(0).sort() 

을 사용할 수 있습니다 : 당신이 만약 더 명확 http://jsfiddle.net/mbest/6dmAn/이