knockout.js - 对 observableArray 进行排序会弄乱 "checked"绑定(bind)

Question

我有一个带有可观察的 subview 模型数组的 View 模型。

这些应该是用户可排序的，所以我使用 sort() observableArray 的方法:

function ViewModel() {
    this.items = ko.observableArray([/* ... some items ... */]);
    this.sort = function () {
        this.items.sort(function (a, b) {
            // comparison
        }
    }
}

每个项目都有一个 type可观察的，通过 checked 绑定(bind)到单选框列表捆绑。

<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>

现象是当 items数组被排序后，单选框随机丢失它们的状态，即对于它们的看似随机的子集，屏幕上看不到任何点——即使它们的值仍然保留在 View 模型中。

自己试试: http://jsfiddle.net/yxg53bph/ - 点击“排序”几次，观察效果。

简单的问题:这里出了什么问题，我该如何解决？

调用 notifySubscribers()在排序后的单个项目上修复了显示问题。然而，这是一个黑客，而不是一个解决方案。

Answer 1

在您的 jsfiddle 中，您设置了 name属性，这就是导致这种错误行为的原因。

我不认为这是 knockout 中的错误。只是在排序时，单选项将由 knockout 处理程序和浏览器本身同时设置(因为单选组只能选中1个单选按钮)。

如果您删除 name 属性(这没关系，因为所有 4 个单选按钮都绑定(bind)到同一个字段，因此将遵守唯一的 1 个 ckecked 约束)，排序将按预期运行。

演示 : jsfiddle