对observableArray进行排序会混淆“已检查”的绑定

时间:2014-09-18 13:01:46

标签: knockout.js knockout-3.0

我有一个带有可观察的子视图模型数组的viewmodel。

这些应该是用户可排序的,因此我使用sort()的{​​{1}}方法:

observableArray

每个项目都有一个function ViewModel() { this.items = ko.observableArray([/* ... some items ... */]); this.sort = function () { this.items.sort(function (a, b) { // comparison } } } 可观察对象,通过type绑定绑定到一个无线电框列表。

checked

现象是,当<li> <input type="radio" value="A" data-bind="checked: type" /> A <input type="radio" value="B" data-bind="checked: type" /> B <input type="radio" value="C" data-bind="checked: type" /> C <input type="radio" value="D" data-bind="checked: type" /> D </li> 数组被排序时,无线电盒会随机丢失它们的状态,即屏幕上看不到任何点看似随机的子集 - 即使它们的仍然在viewmodel中维护。

亲自尝试:http://jsfiddle.net/yxg53bph/ - 点击&#34;排序&#34;几次并观察效果。

简单的问题:这里有什么问题,我该如何解决?


排序后调用单个项目上的items可修复显示问题。然而,这是一个黑客,而不是解决方案。

1 个答案:

答案 0 :(得分:3)

在你的jsfiddle中,你设置了name属性以及导致这种错误行为的原因。

我不认为这是淘汰赛中的一个错误。它只是在排序时,无线电项目将由淘汰处理程序和浏览器本身同时设置(因为无线电组只能选中1个单选按钮)。

如果你删除了name属性(没关系,因为所有4个单选按钮都绑定到同一个字段,只有1个ckecked constrraint会被尊重),排序将按预期运行。

演示 jsfiddle