knockoutjs ObservableArrays 和排序函数:UI 未更新

knockoutjs ObservableArrays and sort function: UI is not updated

本文关键字：UI 更新 函数 ObservableArrays 排序 knockoutjs      更新时间：2023-09-26

在我的视图模型中，我有一个 knockoutjs ObserableArray。在我初始化视图模型后，它成功绑定了数据。然后，我需要做的是对集合进行排序。

$.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/但我仍然不确定为什么它像我最初尝试的那样有效。

当你要对可观察数组进行排序时，你正在解开它。这是导致问题的原因，因为KO无法跟踪数组已更改。 ko.observableArray()具有具有相同签名sort功能，它将通知Observable的订阅者它已被更改。解决方案非常简单：删除牙套vm.searchResults().sort => vm.searchResults.sort 。看看我的例子：http://jsfiddle.net/RbX86/

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

相关文章：