Question

我有以下代码在Chrome，Firefox和IE10中完美运行，但它在IE9中不起作用。具体来说，IE9似乎不允许在select元素中进行虚拟绑定。我一直试图找到另一种方法来做我目前正在做的事情（一个列表包含所有具有属性的元素＆＃34; IsSelected＆＃34;等于false，另一个列表包含所有具有属性的元素＆＃ 34; IsSelected＆＃34;等于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绑定到这些属性。例如，在您的VM中：

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

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

淘汰虚拟绑定的替代方法

1 个答案: