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未更新。

然后，尝试使用以下代码从数组中删除记录，以查看UI是否会响应：

vm.searchResults().shift();

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

修改

以下是一个示例案例：http://jsfiddle.net/tugberk/KLpwP/

这里同样存在问题。

修改

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

Answer 1

当您要对它进行排序时，您正在展开可观察数组。这是导致问题，因为KO无法跟踪数组被更改。 ko.observableArray()具有sort具有相同签名的函数，它将通知observable的订阅者它已被更改。解决方案非常简单：删除大括号vm.searchResults().sort =＆gt; vm.searchResults.sort。查看我的示例：http://jsfiddle.net/RbX86/

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

knockoutjs ObservableArrays和sort函数：UI未更新

1 个答案: