在我的 View 模型中,我有一个 knockoutjs ObserableArray。就在我初始化 ViewModel 之后,它成功地绑定(bind)了数据。然后,我需要做的就是对集合进行排序。
$.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());
});
可以看到,我把元素的Name输出到控制台,可以看到排序前后的顺序。排序工作得很好。问题出在用户界面更新上。不知何故,用户界面没有更新。
然后,尝试使用以下代码从数组中删除一条记录,看看 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 一次时,这种方法非常好。
关于javascript - knockoutjs 可观察数组和排序函数 : UI is not updated,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10480118/