Using conditional knockout templates with IE8

Question

In all 'modern' browsers the following works but not in IE8:

<!-- ko template: {if: $root.itemToEdit.SomeObject() === $data, name: 'EditItemTemplate', afterRender: $root.initializeEditPanel } -->
<!-- /ko -->

I get the following error:

SCRIPT5022: Unable to parse bindings. Message: SyntaxError: Expected identifier, string or number; Bindings value: template: {if: $root.itemToEdit.SomeObject() === $data, name: 'EditItemTemplate', afterRender: $root.initializeEditPanel }

It seems to be the inclusion of the if statement inside the template definition. If I change the markup to the following, IE8 is happy:

<!-- ko if: $root.itemToEdit.SomeObject() === $data -->
   <!-- ko template: {name: 'EditItemTemplate', afterRender: $root.initializeEditPanel } -->
   <!-- /ko -->
<!-- /ko -->

Why does including an if statement in my template not work in IE8?

Answer 1

Older IE versions can be picky about using JavaScript reserved words for property names. If you specify the if like 'if', then you will be fine. Like:

<!-- ko template: {'if': $root.itemToEdit.SomeObject() === $data, name: 'EditItemTemplate', afterRender: $root.initializeEditPanel } -->
<!-- /ko -->

Or something like <label data-bind="attr : { 'for': id }"></label>