knockoutjs ObservableArrays和sort函数: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未更新.

然后,尝试使用以下代码从数组中删除记录,以查看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=> vm.searchResults.sort.查看我的示例:http://jsfiddle.net/RbX86/

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