Question

我遇到了IE10的这个奇怪的错误，它不会发生在Chrome或Firefox中。

错误在于，当我使用Bootstrap组合form-control对具有Knockout数据绑定的一对父子select元素时，子select需要永远刷新。但是，如果将鼠标悬停在子元素上，它会立即刷新。

这是重现它的JS。

尝试使用IE10浏览此link并更改第一个select中的值，第二个select将不会刷新，除非您等待很长时间或鼠标移到第二个select {1}}。

但是，如果我不对form-control元素使用select类，问题就会像link一样消失。

HTML

<label for="cats">Categories</label>
<select id="cats" data-bind="options: availableCats, optionsText: 'name', value: selectedCat, event: {change: populateItems}" class="xform-control"></select>
<label for="items">Items</label>
<select id="items" data-bind="options: availableItems, optionsText: 'name', value: selectedItem" class="xform-control

JS

$(document).ready(function () {
    var BaseVM = function () {
        var that = {};
        return that;
    };

    var TestVM = function () {
        var that = BaseVM();

        that.availableCats = ko.observableArray([{
            name: '--'
        }, {
            name: 'pork'
        }, {
            name: 'ham'
        }]);
        that.selectedCat = ko.observable(null);
        that.availableItems = ko.observableArray([]);
        that.selectedItem = ko.observable(null);

        that.populateItems = function () {
            that.availableItems([]);

            if (that.selectedCat().name === 'pork') {
                that.availableItems([{
                    name: 'chop'
                }]);
            } else if (that.selectedCat().name === 'ham') {
                that.availableItems([{
                    name: 'spam'
                }]);
            }
        };

        return that;
    };

    var vm = TestVM();
    ko.applyBindings(vm);
});

Answer 1

此问题是IE10重绘问题。

另一个人有类似的issue。

不幸的是，解决方案并不理想且非常糟糕。

在完成所有更新逻辑后，您需要在populateItems函数的底部添加此代码：

$('#items').hide(0, function(){$(this).show()});

这将使IE10轻推重绘 select 元素。

这是你的小提琴，updated与工作解决方案。

Bootstrap表单控件类与Knockout数据绑定器冲突

1 个答案: