Question

我有一个div，我尝试使用Knockout使用以下代码进行绑定：

<div data-bind="style: { height: ($('.someDiv').height() - 37) + 'px' }">...</div>

这适用于Chrome，FF或IE11。不确定它是否已在IE9-10上测试过。但它在IE8上失败了，抛出一个＆＃34;无法处理绑定＆＃34;异常。

令人惊讶的是，这有效：

// without substracting 37
style: { height: ($('.someDiv').height() + 'px' }

// replacing 37 by the same computed value, doesn't matter if it ends up being 0
style: { height: ($('.someDiv').height() - $('.someDiv').height()) + 'px' }

但更令人惊讶的是，这也失败了：

// replacing 37 by something (dumb) assuring a positive value
style: { height: ($('.someDiv').height() - $('.someDiv').height() + $('.someDiv').height()) + 'px' }

我在这里毫无头绪。任何人都知道这件事吗？

我正在使用jQuery 1.11.1和Knockout 3.1.0。

修改

好的，我向前走了一点。看来div someDiv是使用自定义绑定中的模板注入的。因此，如果我围绕绑定执行类似的操作：

console.log('before ko');
console.log('length:'+$('.someDiv').length);
console.log('$height:'+$('.someDiv').height());

ko.applyBindings(vm, $('#container').get(0));

console.log('after ko');
console.log('length:'+$('.someDiv').length);
console.log('$height:'+$('.someDiv').height());

输出（在IE8和Chrome中）：

before ko
$length:0
$height:null
after ko
$length:1
$height:762

所以我猜想在绑定过程中Knockout会发生不同的事情，具体取决于浏览器。

Answer 1

我意识到我的答案可能不是一个直接的答案，但因为它可能会帮助你或其他人来到这里，我仍然会发布它。其他人可能会提出更直接的答案，谁知道呢。

您的问题可能是由于逻辑从data-bind属性输入KO作为字符串，然后执行。将这种逻辑排除在视图之外可能会有所帮助，并将其放在JavaScript代码中。无论如何，这将使调试变得更加容易。

可用于执行此操作的一个KO功能是使用自定义bindingHandler。这是你如何做到的：

ko.bindingHandlers.fixHeight = {
    update: function(element, valueAccessor, allBindings) {        
        var h =  ($('.someDiv').height() - 37) + 'px';
        $(element).height(h);
    }
};

ko.applyBindings({});

div {
    display: inline-block;
    background-color: red;
}

.someDiv {
    height: 123px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.1.0/knockout-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div class="someDiv">someDiv</div>
<div data-bind="fixHeight">...</div>

如果我将IE11版本置于IE8模式，则上述工作正常。

同样，我意识到这可能不是一个直接的答案，但也许这对人们来说很有用。

Answer 2

我根据这里的答案找到了我的解决方案

IE8 knockout error - Unable to process binding

这真的是因为IE8中样式属性的值不正确。

Knockout绑定在IE8中抛出“无法处理绑定”异常

2 个答案: