Question

I’ve got the following KnockoutJS 2.0 code that works fine in all modern browsers, but fails on IE8.

Here’s the simplified code:

<table>
   <tr>
       <td data-bind="template: { foreach: fooItems, name: 'foo-template' }></td>
       <td data-bind="template: { foreach: barItems, name: 'foo-template' }></td>
   </tr>
</table>

<script id="foo-template" type="text/html">
   <div data-bind="click: SomeMethod">
       foobar
   </div>
</script>

<script type="text/javascript">

   var viewModel = {
       fooItems: ko.observableArray(),
       barItems: ko.observableArray(),
   }
   ko.applyBindings(viewModel);

</script>

This works fine on IE9, Chrome, Firefox.

However, on IE8, I get the following error:

“Unable to parse bindings. SomeMethod is undefined.”

Debugging this in IE8, I see the following information:

It’s about to throw the exception, and it’s coming during the rendering of the foo-template.

Notice that $data is undefined. That’s why SomeMethod is not resolving; it should exist on $data.SomeMethod, but $data is undefined.

Why is this failing on IE8?

Answer 1

I had the exact same problem and was quite disapointed to see that you solved your issue without knowing how.

So, for the futur visitors, here is how I solved this :

I had initialised the array used in a foreach with an hard-coded array, ending with a trailing coma.

In your example, that would looks like this :

viewModel.fooItems([
    {SomeMethod: function () {}},
    {SomeMethod: function () {}},   // <- here is the evil coma
]);

When looking a little closer, ie8 evaluated this array as a 3 items array whose last item was undefined. Hence the undefined $data.

Of course, having the same symptoms doesn’t mean your problem was the same, but if it can help anybody …