KnockoutJS：Internet Explorer 中的多选问题

Question

我有一个非常简单的案例，使用 KnockoutJS 3 的多选 select 元素。如果在 IE（任何版本）中使用 selectedOptions 绑定到多选元素，当选择新选项时，选择元素总是跳到最底部的选定元素。我看过许多文章，似乎与此有关，但都已经过时了，没有明确的解决方案。任何帮助都将不胜感激。

这里是一个简单的示例：

http://jsfiddle.net/unp9j9dc/1

点击项目1，按住Ctrl键，再点击项目20，然后返回到项目2即可重现。UI会弹回到项目20。

此外，我应该提到，虽然JSFiddle使用的是knockout 3.0.0，但我在本地使用相同结果的3.2.0版本。我很快将尝试3.3.0版本。

更新：使用Knockout 3.3.0也有相同的结果。

- Steve Danner

---

同样的问题在官方示例中也存在。 - James Thorpe

可能相关的错误报告： https://github.com/knockout/knockout/issues/1354。如果我从您的示例中删除selectedOptions绑定，该问题将消失。 - James Thorpe

感谢@JamesThorpe。是的，您也可以将selectedOptions设置为非可观察数组，这基本上是单向绑定（从UI到模型）。但这会削弱Knockout的功能。虽然我有可能走这条路，但那样会让事情变得混乱不堪。 - Steve Danner

是的，我同意这不是正确的方法 - 只是强调它与那个错误（在使用该绑定时在IE中出现的不良行为）相同。可能有关联，也可能没有！ - James Thorpe

感谢您的帮助@JamesThorpe，最终我改变了代码，并且很快会发送一个拉取请求，因为我相信这是一个完全有效的修复。 - Steve Danner

Answer 1

明白了。 我正在广泛使用订阅和双向绑定，所有这些似乎仍然正常工作。

基本上，KO基础设施只是在UI或模型更新时通过同步UI与更新的模型绑定来同步。 因此，它正在设置UI更新时每个选项的selected属性，并且当它“重新选择”最后一个选项时，IE决定将其滚动到视图中。

我拿到了Knockout 3.2.0的调试版本，并编辑了305-310行，以便如果已经等于要设置的值，则不尝试更新选项的selected属性。 如果其他人遇到此问题，我计划在有时间时提交拉取请求。

更新：再次感谢@JamesThorpe，这里是我编辑的源代码。

        setOptionNodeSelectionState: function (optionNode, isSelected) {
            // IE6 sometimes throws "unknown error" if you try to write to .selected directly, whereas Firefox struggles with setAttribute. Pick one based on browser.
            if (ieVersion < 7)
                optionNode.setAttribute("selected", isSelected);
            else if (optionNode.selected != isSelected)
                optionNode.selected = isSelected;
        },

- Steve Danner

---

为了完善这个答案，您能否提供您所编辑的源代码链接，以便于比较修改内容？ - James Thorpe

在修复代码中有一个拼写错误(至少按照你在这里的贴出来的代码是这样) - 应该是 optionNode.selected = isSelected。 - James Thorpe

再次感谢@JamesThorpe，我更新了答案以包含所有内容。 - Steve Danner

如果我确实需要在SELECT中选择所有元素，但又要防止IE滚动到最后一个元素，我该怎么办？ - Alexander