Question

I’m using knockoutjs 2.0
I’ve been trying to have this table work in IE8 (It works fine in FF, Chrome and IE9):

<table data-bind="foreach: Applications">
    <tr>
        <td><input type="text" data-bind="value: Name"/></td>
    </tr>
</table>

In IE8 I get the error:
Error: ‘undefined’ is null or not an object
URL: http://127.0.0.1:81/Scripts/jquery-1.5.1.min.js

I’ve actually fixed the issue by making the table a tbody with a template and making the template contain the table row. But this is not that clean and I am wondering if there is a better solution.

Below is how I setup the view model:

self.Applications = ko.observableArray([]);

$.each(model.Applications, function (i, applicationItem) {
    var application = new Application(applicationItem.ApplicationID, applicationItem.Name);
    self.Applications.push(application);
});

function Application(applicationID, name) {
    var self = this;
    self.ApplicationID = applicationID
    self.Name = ko.observable(name);
};

EDIT: Found a solution
Used containerless control flow instead

<table>
    <tbody>
    <!-- ko foreach: Applications -->
    <tr>
        <td><input type="text" data-bind="value: Name"/></td>
    </tr>
    <!-- /ko -->
    </tbody>
</table>

Answer 1

your fix works fine, if you want a less verbose option you can simply put the data-bind on the “tbody” node:

<table>
    <tbody data-bind="foreach: Applications">
        <tr>
            <td><input type="text" data-bind="value: Name"/></td>
        </tr>
    </tbody>
</table>

The problem is that ie8 automatically adds a “tbody” to the DOM (even if not present in the markup). so, if the data-bind attribute is on the “table” node, when knockout executes the foreach, the new children are added to “table” and not to “tbody”, obtaining something like:

<table data-bind="foreach: Applications">
    <tr>
        <td><input type="text" value="John"/></td>
    </tr>
    <tbody>
    </tbody>
</table>

And IE is not happy about it. this is why, as you have surely found, using only the “containerless” notation is not enough, and you need the “tbody” node. Note that other browsers have no problem handling this.
This is one of the “must know” tricks when using knockoutjs.

Hope this helps undertanding what’s going on.