Bootstrap 表单控制 class 与 Knockout 数据绑定冲突

Question

我在 IE10 中遇到了这个奇怪的错误，但在 Chrome 或 Firefox 中没有发生。

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

这是重现它的 JS。

尝试用IE10浏览这个link，改变第一个select的值，第二个select不会刷新，除非你等待很长时间或鼠标移到第二 select.

但是，如果我不对 select 元素使用 form-control class，问题就会消失，就像这样 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 元素。

这是您的 fiddle，updated 的工作解决方案。

Bootstrap 表单控制 class 与 Knockout 数据绑定冲突

Bootstrap form-control class conflicting with Knockout databind

jquery

twitter-bootstrap

knockout.js

internet-explorer-10