Foreach binding with "as" alias does not work correctly in IE9

Question

I can't get the for-each to work correctly in IE9, however works in IE10, IE11

Is there anything wrong with the way I have it? The following code can be used to reproduce the issue in IE9:

var vm = {
    MyMessages: [{
        MessageType1: 'A',
        MessageToShow1: 'B '
    }]
};

ko.applyBindings(vm);

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>

<ul data-bind="foreach: {data: MyMessages, as: 'foo'} "  class="list-unstyled">
    <li>
        <div>
            <a href="#" class="close" data-dismiss="alert">&times;</a>
            <em><label data-bind='text: foo.MessageType1' /></em>
            <label data-bind='text: foo.MessageToShow1' />
        </div>
    </li>
</ul>

The error I get is that:

'foo' is undefined

Answer 1

tl;dr: Write out the label tags with an open and close tags.

It appears when rendering in IE 9 mode, IE is misclassing some of the elements due to the use of "self-closing" tags. The label is one such tag. Since by being in IE 9 mode, it is also not using standards (HTML5) mode. IE 10 mode will render it in standards mode. So depending on the mode, this question indicates how the tag is interpreted differs.

I guess that in IE 9, it's seeing the tag as an open tag without a closing tag so is applying the bindings to the wrong elements.

By changing the labels to use open and close tags, it seems to fix it.

<ul data-bind="foreach: {data: MyMessages, as: 'foo'} "  class="list-unstyled">
    <li>
        <div>
            <a href="#" class="close" data-dismiss="alert">&times;</a>
            <em><label data-bind='text: foo.MessageType1'></label></em>
            <label data-bind='text: foo.MessageToShow1'></label>
        </div>
    </li>
</ul>

http://jsfiddle.net/7c7c0e2m/1/