web-dev-qa-db-ja.com

ノックアウト-foreachを使用して一緒に並べ替える

Foreachバインディングとソートを組み合わせるのに問題があります。私はそのようにバインドされたリストを持っています：

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

ウィジェットは単純な観測可能な配列です。

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を使用していますが、それがこのシナリオに影響を与えているとは思いません。

knockout.jsforeachbreezeko.observablearray
20
daveywc

observableArray.sortは、ソートされた基になる（ "regular"）配列を返しますが、observableArrayは返しません。そのため、変更はUIに表示されません。

並べ替えとUIを更新するには、並べ替えを実行し、バインディングで計算されたものを使用するko.computedを作成する必要があります。 ko.computedはwidgetsの変更をリッスンし、並べ替えを再計算するためです。

var widgets= ko.observableArray();

var sortedWidgets = ko.computed(function() {
   return widgets().sort(function (left, right) { 
        return left.order() == right.order() ? 
             0 : 
             (left.order() < right.order() ? -1 : 1); 
   });
});

次に、それを次のものとバインドできます。

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