Knockout视图模型中重排项时单选按钮为何取消选中？

核心原因 #

1. Knockout foreach默认追踪逻辑缺陷：你用的Knockout foreach绑定默认按数组索引匹配DOM元素，交换数组元素位置时，Knockout会复用原有位置的DOM并重新绑定数据，导致单选按钮的checked状态无法同步到新绑定的数据上。
2. moveDown方法边界错误：当前条件i < question.answers().length允许操作最后一个元素，此时array[i+1]会是undefined，引发逻辑异常。

具体解决步骤 #

1. 给foreach绑定添加trackBy唯一标识

修改foreach绑定代码，让Knockout根据每个答案的唯一ID（比如answer.id）追踪DOM元素，这样交换位置时DOM会跟随数据移动，而非复用原有DOM：

<!-- ko foreach: { data: answers, trackBy: item => item.id } -->
<!-- 你的答案项内容 -->
<!-- /ko -->

2. 修正moveDown的边界条件

把if (i < question.answers().length)改为if (i < question.answers().length - 1)，避免操作最后一个元素时出现undefined：

self.moveDown = answer => {
    var i = question.answers.indexOf(answer);
    if (i < question.answers().length - 1) {
        var array = question.answers();
        question.answers.splice(i, 2, array[i+1], array[i]);
    }
}

3. 验证值类型匹配（可选）

如果上述方法仍有问题，检查question.correctAnswer的类型和answer.id的类型是否一致。比如你用字符串"0"/"1"存储正确答案，但answer.id是数字类型，需将绑定的value转为字符串：

<input type="radio" name="correctAnswer" data-bind="checked: $parent.correctAnswer, value: id.toString()" />

原理说明 #

通过trackBy指定唯一标识后，Knockout会将每个答案对象与对应的DOM元素绑定，交换数组元素位置时，DOM元素会随之重新排序，而非被复用，这样单选按钮的checked状态会始终与question.correctAnswer的值正确匹配，不会出现选中状态丢失的问题。

内容的提问来源于stack exchange，提问作者GuruBob