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

正如你所看到的，我輸出的元件到控制檯的名稱，看看前後排序後的順序。分類工作很好。問題在於UI更新。不知何故，UI不會更新。

然後，嘗試從以下代碼數組中刪除一條記錄，看看用戶界面將到或沒有響應。

vm.searchResults().shift(); 

的UI停留在相同，並沒有再次更新。這裏會有什麼問題？

編輯：

下面是一個簡單的情況下，以及：http://jsfiddle.net/tugberk/KLpwP/

同樣的問題在這裏。

編輯：

我解決了這個問題，因爲這顯示樣品中：http://jsfiddle.net/tugberk/KLpwP/16/但我仍然不知道爲什麼它的工作，因爲我試過在第一。

Answer 1

當你打算對它進行排序時，你正在解開可觀察數組。這是導致問題的原因，因爲KO無法跟蹤數組已更改。 ko.observableArray()具有相同簽名的sort函數，它會通知observable的訂閱者它已被更改。解決方案非常簡單：刪除花括號vm.searchResults().sort =>vm.searchResults.sort。結帳我的例子：http://jsfiddle.net/RbX86/

另一種告訴KO數組有變化的方法 - 在數組操作後調用valueHasMutated方法。請查看此示例：http://jsfiddle.net/RbX86/1/ 當您需要對數組進行許多更改並且只想刷新一次UI時，此方法非常有用。