IE versions earlier than 9 raises error "Expected identifier, string or number”

Question

This knockout 2.1 binding expression works fine under Firefox and IE9, but crashes in IE9 compatibility mode with error "Expected identifier, string or number”:

<div data-bind="template: {
    if: myDataModel, 
    data: myDataModel, 
    afterRender: setup(myDataModel) }">

I found actual place under debugger, it's this line of code (knockout-2.1.0.debug.js):

return new Function("sc", functionBody)

functionBody is a string equal to the expression above. I tried to play with spaces and carriage return characters - nothing helps, same results: it works as expected with any browser other than IE9 compatibility mode

Any suggestions?

Answer 1

I think the issue is that older versions of IE don't like "if" or similar reserved words to appear as property names. Try putting single quotes around the property names.

<div data-bind="template: {
'if': myDataModel, 
data: myDataModel, 
afterRender: setup(myDataModel) }">

Another common time that you'll have this happen when you have a "class" binding. Same fix:

<tr data-bind="attr: { 'class': packageSelected() ? 'success' : '' }">

List of reserved words in JS: https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Reserved_Words