녹아웃 - foreach 및 정렬 함께 사용

Question

foreach 바인딩을 정렬과 결합하는 데 문제가 있습니다.

<article data-bind="foreach: widgets"> 

위젯은 간단한 obvservable 배열 :

이 멋지게 나에게 내 "위젯"의 목록을 제공하는 작품

var widgets= ko.observableArray(); 

그래서 같은 바인딩 목록을 가지고있다. 이 목록에 새 "위젯"을 추가하면 데이터 바인딩을 통해 목록에 동적으로 나타납니다. 그러나 최대한 빨리 배열에 정렬 추가 할

:

<article data-bind="foreach: widgets.sort(function (left, right) { return left.order() == right.order() ? 0 : (left.order() < right.order() ? -1 : 1); })"> 

다음 새로 위젯이 더 이상 내 목록에 나타나지 않습니다 추가 - 내가 페이지를 다시로드하지 않는 한. (이 시점에서 정렬이 제대로 작동합니다. 정렬하는 "주문"필드를 업데이트하면 목록의 항목이 동적으로 다시 정렬됩니다.)

관찰 가능한 배열의 새 항목을 동적으로 업데이트하면서 정렬 작업을 수행하려면 어떻게해야합니까?

데이터를 검색하기 위해 Breezejs를 사용하고 있지만이 시나리오에 영향을 미치지 않는다고 생각합니다.

Answer 1

observableArray.sort은 정렬 된 기본 ("일반") 배열을 반환하며 UI에 변경 내용이 표시되지 않는 이유는 observableArray이 아닙니다.

정렬 및 UI를 업데이트하려면 정렬을 수행하고 바인딩에서 계산 된 값을 사용하는 ko.computed을 만들어야합니다. ko.computed은 widgets 변경 사항을 수신하고 정렬을 다시 계산하기 때문에 - 잘했다 당신 감사합니다 -

<article data-bind="foreach: sortedWidgets" />