IE8中的KnockoutJS伪绑定失败

Question

The following fails in IE8, but works in real browsers

<div data-bind="with: currentItem, visible: currentItemState() === 'view'">

    <!-- ko if: resource().versions().length -->
    <!-- ko with: resource().versions()[0] -->

    <div style="margin-top: 15px;" data-bind="visible: error()">
         .....

    <!-- /ko -->
    <!-- /ko -->

Basically I'm getting property 'error' is null or undefined which means the with (and if ) bindings aren't working properly. This is probably because IE8 is stripping the comments out, which I've seen it do in other contexts, like within a <select> node, but I've never seen it do that in a place like this.

Is there a good way to fix this (without working around the problem by changing my html structure)?

Answer 1

Most of the time when I have come across this, it is not down to knockout but HTML. Things like not closing tags off properly such as having a self closing <label /> that busted it.

IE8 is very particular about this stuff. I had one place where it didn't render the bottom half of a <!-- ko if --> because of the lable issue

Answer 2

Wrap the second containerless binding within an empty div so that it is parsed correctly in all browsers

<div data-bind="with: currentItem, visible: currentItemState() === 'view'">
    <!-- ko if: resource().versions().length -->
        <div>
        <!-- ko with: resource().versions()[0] -->
            <div style="margin-top: 15px;" data-bind="visible: error()">
        <!-- /ko -->
        </div>
    <!-- /ko -->
</div>

Answer 3

I'm not sure if there's a proper way to fix this, but it turns out knockout's with binding is intelligent enough to not render the nodes at all if the with*ed* value is undefined. So replacing both of those pseudo bindings with just

<div data-bind="with: resource().versions()[0]">

appears to fix the problem.