Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Loading…

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

Open
DazWilkin opened this Issue · 10 comments

8 participants

@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
Collaborator

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.

@maverix

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
Collaborator

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
Collaborator

@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 mbest reopened this
@mbest
Collaborator

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

@mbest mbest was assigned
@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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.