IE8 knockout Problem with foreach binding data binding and input value value binding

Question

I am using knockoutjs 2.0 I am trying to use this table 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 really fixed the problem by making the table the body of the template and creating a template containing the table row. But this is not so clean, and I wonder if there is a better solution.

The following is an example of setting a 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: Solution found Instead, a stream is used without using a container

 <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 just put the data binding 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 "tbody" to the DOM (even if it is not in the markup). therefore, if the data binding attribute is in the “table” node, when the knockout performs foreach, new children are added to the “table” and not to “tbody”, getting something like:

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

And IE is not happy with that. that’s why, as you probably found, using only “no containers” notation is not enough, and you need a “tbody” node. Please note that in other browsers there is no problem with this. This is one of the "need to know" tricks when using knockoutjs.

Hope this helps get things going on.

Answer 2

I would say that you should use $ data.Name instead of a name. Otherwise, the knockout expects the name to be available in your ViewModel / $ root.