knockoutjs ObservableArrays 和排序功能：UI 未更新答案

【问题标题】：knockoutjs ObservableArrays and sort function: UI is not updatedknockoutjs ObservableArrays 和排序功能：UI 未更新
【发布时间】：2012-05-07 10:01:21
【问题描述】：

在我的视图模型中，我有一个 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();

用户界面保持不变，没有再次更新。这里会有什么问题？

编辑：

这里还有一个示例：http://jsfiddle.net/tugberk/KLpwP/

这里也有同样的问题。

编辑：

我解决了这个示例中显示的问题：http://jsfiddle.net/tugberk/KLpwP/16/ 但我仍然不确定为什么它像我最初尝试的那样有效。

【问题讨论】：

标签： javascript knockout.js ko.observablearray

【解决方案1】：

当你要对它进行排序时，你正在解包 observable 数组。这是导致问题的原因，因为 KO 无法跟踪数组已更改。 ko.observableArray() 具有具有相同签名的 sort 函数，它会通知 observable 的订阅者它已被更改。解决方法很简单：去掉大括号vm.searchResults().sort => vm.searchResults.sort。查看我的示例：http://jsfiddle.net/RbX86/

另一种告诉 KO 数组发生变化的方法 - 在对数组进行操作后调用 valueHasMutated 方法。请查看此示例：http://jsfiddle.net/RbX86/1/ 当您需要对数组进行许多更改并且只想刷新一次 UI 时，这种方法非常有用。

【讨论】：