ObservableArrays 및 정렬 함수 : UI가 업데이트되지 않았습니다.

Question

내 viewmodel에서 knockoutjs ObserableArray 있습니다. ViewModel을 초기화 한 직후에 데이터를 성공적으로 바인딩합니다. 그런 다음 컬렉션을 정렬해야합니다. 당신이 볼 수 있듯이

$.each(vm.searchResults(), function (i, property) { 
    console.log(property.Name()); 
}); 

vm.searchResults().sort(function (a, b) { 
    return a.Name().toLowerCase() > b.Name().toLowerCase() ? 1 : -1; 
}); 

$.each(vm.searchResults(), function (i, property) { 
    console.log(property.Name()); 
}); 

는, I 출력 콘솔에 요소의 이름은 이전과 정렬 후에 순서를 확인합니다. 정렬은 잘 작동합니다. 문제는 UI 업데이트에 있습니다. 어쨌든 UI는 업데이트되지 않습니다.

다음, UI가 그 여부에 응답 할 것입니다 있는지 확인하기 위해 다음 코드를 사용하여 배열에서 레코드를 제거하려고 :

는

vm.searchResults().shift(); 

UI를은 동일하게 유지하고 다시 업데이트되지 않았습니다. 여기서 문제는 무엇입니까?

편집 : 여기뿐만 아니라 http://jsfiddle.net/tugberk/KLpwP/

같은 문제 : 다음

뿐만 아니라 샘플 경우입니다.

편집 : http://jsfiddle.net/tugberk/KLpwP/16/하지만 처음에 시도로이 일을 왜 아직 확실하지 않다 :이 샘플에서와 같이

나는이 문제를 해결했다.

Answer 1

정렬 할 때 관찰 할 수있는 배열의 래핑을합니다. KO가 배열을 바꿀 수 없기 때문에 이것은 문제의 원인입니다. ko.observableArray()은 sort이 동일한 서명으로 기능하고 관찰 가능 가입자에게 변경되었음을 통지합니다. 해결책은 매우 간단합니다. 중괄호를 제거하십시오 vm.searchResults().sort =>vm.searchResults.sort. 내 예를 확인하십시오 : http://jsfiddle.net/RbX86/

배열에 변경 사항이 있음을 KO에 알리는 또 다른 방법은 배열로 조작 한 후 valueHasMutated 메서드를 호출하는 것입니다. 이 샘플을 검토하십시오 : http://jsfiddle.net/RbX86/1/ 이 방법은 배열을 많이 변경해야하고 UI를 한 번만 새로 고침하려는 경우 매우 유용합니다.