"attr" binding throws 'unable to parse' if (subset) of attributes not quoted in binding

[DazWilkin]

I understand, from the documentation that the attr binding does not require the DOM attribute to be quoted. Unfortunately, for some subset of attributes, this throws an "unable to parse" error in Safari 5.0.5. It works as described in the other browsers.

http://knockoutjs.com/documentation/attr-binding.html

Error: Unable to parse bindings.
Message: SyntaxError: Parse error;
Bindings value: text: $data, attr: { class: $data }

Here's an example. The class attribute is not quoted. This works as defined in Chrome, IE and Firefox. However, in Safari it will throw the error. Change it to { 'class': $data } and it will work. It seems to be inconsistent in Safari. I tried using href and was able to use this without problems without quotes in Safari.

data-bind="text: $data, attr: { class: $data }"

Quoting the attributes appears to work correctly across browsers and may perhaps be the guidance.

Here's the fiddle:
http://jsfiddle.net/DazWilkin/SMPH9/1/

[mbest]

IE8 also doesn't like class unquoted. Some browsers restrict using reserverd words as literal object properties. So in Knockout, this affects attr.class and template.if.

[andrewharry]

the work around i've had to use for IE to play friendly was the following:

<div data-bind='attr: { "class": classes, "className": classes }'></div>

IE7 wouldn't work without the "className" addition

[treshugart]

I just submitted a pull request which references the comment from @Maverix. This references #322 which I created as a reference to the issue that the pull request fixes.

[mbest]

Fix for this issue will be included with #321. But keeping this open as a reminder.

[SteveSanderson]

Thanks for reporting this. It's very much by design - if you pass object literals to bindings, they need to be legal on your browser. For older versions of IE, that means quoting any keys that are reserved words.

[mbest]

@SteveSanderson Actually we already allow unquoted keys at the root level. Normally if wouldn't be allowed without quotes in IE. I don't see the harm in extended this same feature to the sub-object level, especially for the attr, css, and style bindings.

[mbest]

Also, knockout already has plenty of code to support specific browser quirks. I think we should try to support leaving out quotes wherever possible.

[bitinn]

Just ran into this problem myself, unquoted versions works on desktop browser, but error on Android 2.3.x and iOS 4.x

Wondering if there are a complete list of attribute I should look out for, so far I see problem with:

'if' in ko virtual element, 'class' in attr binding, 'for' in attr binding (label element specific).

I took @mbest advise and scan for reserved words in template.

Strangely enough, 'with' in ko virtual element is NOT affected, possibly due to running in strict mode (where it is forbidden)?

A guideline on this would be great: wrapping keyword in quotes are like deciding whether to put semicolon at the end of a statement...

[stijnherreman]

Is there a list of issues like this one? Only took me about half an hour to find the cause and this issue, but a page listing IE8 quirks would be useful.

[chaoaretasty]

I just spent an hour banging my head against this one. A list of known issues for older browsers would be incredibly helpful