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

I've taken the liberty of changing up your code so it's an actual repro. I could confirm the issue with this code. It was meant to help, but if you feel I've changed your question to radically please feel free to roll back my edits. — Jeroen, Dec 02 '14 at 15:24
Just a blind shot in the dark but does quoting the property fix it? i.e., `foreach: {data: MyMessages, 'as': 'foo'}` — Jeff Mercado, Dec 02 '14 at 15:34
@Jeff Just tried in a jsfiddle with IE11 set to render in 9 document mode, get the error with or without quoting `as` — James Thorpe, Dec 02 '14 at 15:40
Having said that, removing the `as` and binding directly to `MessageType1` and `MessageToShow1` is resulting in an error too... — James Thorpe, Dec 02 '14 at 15:41
[Here's the fiddle](http://jsfiddle.net/dgyg2ytr/) - works fine in Chrome & IE11, but switch IE11 to 9 mode and you see an error. Looks to be a bug in knockout affecting `foreach` in general? — James Thorpe, Dec 02 '14 at 15:45
I dont see why you need to name it foo. Why cant you just use $data and make the data-bind be data-bind='foreach: MyMessages' ? — segFault, Dec 02 '14 at 15:47
@segFault You may have more than one `foreach` nested - using `as` allows you to be specific as to which one you're referring to. This is just an example showing a problem, in this instance you're right, you wouldn't really need to use it. — James Thorpe, Dec 02 '14 at 15:49
I tried to debug through this and noticed something odd. I used [this fiddle](http://jsfiddle.net/7c7c0e2m/). I have IE 10 and in browser mode 10, setting a breakpoint on line 2880, it hits the breakpoint 2 times. In browser mode 9, it hits it 5 times. It looks like it might be misclassing one of the child elements applying more bindings than it should. — Jeff Mercado, Dec 02 '14 at 16:56
@JamesThorpe: Sorry, miscounted, I didn't count the initial break. I had to continue 2 times after the break. — Jeff Mercado, Dec 02 '14 at 17:07
I only used 'as' as a desperate attempt to solve the issue. It is not needed here. — user80855, Dec 03 '14 at 03:26

score 3 · Accepted Answer · edited May 23 '17 at 11:50

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/

also found that changing the label to a span just fixed the issue too. — user80855, Dec 03 '14 at 03:22

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

1 Answers1