Using conditional knockout templates with IE8
cross-browser, internet-explorer-8, knockout.js, templates
Solution
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>`
Problem
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?