淘汰虚拟绑定的替代方法

Question

我有以下代码在 Chrome、Firefox 和 IE10 中完美运行，但在 IE9 中无法运行。具体来说，IE9 似乎不允许在 select 元素中进行虚拟绑定。我一直在尝试寻找一种替代方法来做我目前正在做的事情（一个列表包含属性“IsSelected”等于 false 的所有元素，另一个列表包含属性“IsSelected”等于 true 的所有元素）但可以似乎没有找到在所有浏览器之间兼容的正确方法。

<select data-bind="foreach:Credentials" multiple="multiple" id="UnselectedCredentialsList" name="UnselectedCredentialsList" size="22">
    <!-- ko 'if': !IsSelected() -->
    <option data-bind="text:Name,value:Id" class="qloptions"></option>
    <!-- /ko -->
</select>

<select data-bind="foreach:Credentials" multiple="multiple" id="SelectedCredentialsList" name="SelectedCredentialsList">
    <!-- ko 'if': IsSelected() -->
    <option data-bind="text:Name,value:Id" class=" qloptions"></option>
    <!-- /ko -->
</select>

Answer 1

正如您现在删除的上一个问题中的链接问题所说：

Knockout virtual elements not working with Internet Explorer

这是<IE 10 的选择标签中的虚拟元素的一个已知问题

解决此问题的一种方法是拥有computed 属性，您可以将每个select 绑定到这些属性。例如，在您的虚拟机内部：

var self = this;
self.selectedCredentials = ko.computed(function() {
    return ko.utils.arrayFilter(self.Credentials(), function(item) {
        return item.IsSelected();
    });
}

然后你可以绑定它：

<select data-bind="options:selectedCredentials, optionsText: 'Name', optionsValue: 'Id'"
    multiple="multiple" id="UnselectedCredentialsList" 
    name="UnselectedCredentialsList" size="22">

显然你可以对未选择的项目做同样的事情。