Binding error in Knockout.js in IE9 Compatibility View

Question

My web app's UI is mostly built with the excellent Knockout.js. It is showing some layout errors in IE8 under IE7 compatibility mode. I have tried adding a meta tag to force standards mode like so:

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

However, in IE9 under IE9 Compatibility View (which I have to assume some users will have set) this causes an error when Knockout does its binding:

DOM Exception: INVALID_CHARACTER_ERR (5)

I've found plenty of references to this error on the net - to do with the manner in which DOM elements are created - but obviously I'm not controlling this, Knockout is.

What is a robust and minimally hacky way to force (or encourage) all present and future versions of IE to render in standards mode, which is also compatible with how Knockout.js builds the DOM? Also, can anyone elaborate on exactly what Knockout.js is doing here which IE9 doesn't like? Many thanks.

UPDATE:

I've isolated at least one issue in my markup. I have a pair of radio buttons:

        <input type="radio" data-bind="checked: Gender, attr: { name: 'gender-' + ID() }" value="@((int)Sex.Male)" />
        <span>Male</span>
        <input type="radio" data-bind="checked: Gender, attr: { name: 'gender-' + ID() }" value="@((int)Sex.Female)" />
        <span>Female</span>

The name attribute of this pair of radio buttons is generated as "gender-" plus the ID of the currently bound view model, as I have a deep hierarchy with multiple instances of this pair of radio buttons. Because I am generating the name attribute with Knockout, I'm not specifying it against the input in the markup - and when I do also add a manual name such as "joe", this binds correctly under Browser Mode: "IE9 Compatibility View". So it's as if when in compatibility mode, the radio button is being deemed to be invalid by IE because it doesn't have a name attribute. But it works under Browser Mode: "IE9".

Also this doesn't relate specifically to the IE-edge meta tag, it will fail whenever I switch to Compatibility View regardless - but my next question is, why doesn't that meta tag override the browser setting?

Advised

Answer 1

Try to wrap name attribute with quotes.

 <input type="radio" data-bind="checked: Gender, attr: { 'name': 'gender-' + ID() }" value="@((int)Sex.Male)" /> 

Check answer details at comments below

Ivelisseivens

No luck. I don't think the problem is with Knockout not identifying the attribute name, I think it's with what IE9 in compatibility view considers to be valid markup when building DOM elements. – Advised

Created demo [jsfiddle ](jsfiddle.net/JMsYP). Tested in all IE view modes - no errors. Maybe the problem with the values that you trying to bind. Can you modify fiddle according to your data and reproduce the error? – Ivelisseivens

Sorry for the delay Vadim. Take a look at this modified fiddle: jsfiddle.net/JMsYP/6 For me, in Firefox and IE9 NOT in compatibility mode, the 2 pairs of radio buttons (one for each Person) render correctly. But in IE when I switch to IE9 compatibility view, the binding fails with the same error (which I'm alerting). I have changed the values of each radio button to 1 and 2, to represent my enum values, rather than 0 and 1 for a boolean property. Do you get the same problem? Cheers. – Advised

I got the same problem. The problem is within IE API. The document.createElement can't accept html as argument and only tag whether other browsers can create by html. When you want to generate name attribute knockout trying to create element using html code with defined name which can’t be used for IE in compatibility mode. As workaround you can define name for radio before using knockout binding. – Ivelisseivens

Interesting. You're right, it works when I add name="temp" which then gets replaced by Knockout: jsfiddle.net/JMsYP/9 That's an unfortunate hack, but I may need to go with it for those poor folk who use IE. Many thanks! – Advised

Maybe edit your answer and add a note to see the details below, after investigation. – Advised