2012-05-07 7 views
6

私のviewmodelでは、私はknockoutjs ObserableArrayを持っています。私はViewModelを初期化した直後に、データを正常にバインドします。次に、コレクションをソートするだけです。ObservableArraysとsort関数:UIは更新されません

$.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()); 
}); 

ご覧のとおり、ソート前と後の順序を確認するために、要素の名前をコンソールに出力します。並べ替えはうまく動作します。問題は、UIの更新です。どういうわけか、UIは更新されません。

その後、UIがそれに応答したりしませんかどうかを確認するために、次のコードで配列からレコードを削除しよう:

vm.searchResults().shift(); 

UIは同じままで、再び更新されませんでした。ここで何が問題になるでしょうか?

編集:ここにもhttp://jsfiddle.net/tugberk/KLpwP/

同じ問題:ここで

は、同様のサンプルケースです。

編集:

私は、このサンプルのように問題を解決:http://jsfiddle.net/tugberk/KLpwP/16/しかし、私は最初に試したとして、それが働いて、なぜ私はまだわかりません。

答えて

18

ソートしようとしているときに、観測可能な配列をアンラッピングしています。これは、KOがトラック配列を変更できなかったために問題を引き起こします。 ko.observableArray()sortの署名が同じで、観測可能な加入者に変更されたことを通知します。解決方法は非常に簡単です。中かっこは除きますvm.searchResults().sort =>vm.searchResults.sort。私の例をチェックアウトしてください:http://jsfiddle.net/RbX86/

アレイが変更されたことをKOに伝える別の方法 - アレイでの操作後にvalueHasMutatedメソッドを呼び出します。このサンプルを見直してください:http://jsfiddle.net/RbX86/1/ この方法は、配列に多くの変更を加え、UIを一度しかリフレッシュしない場合に非常に適しています。

関連する問題