bindAttr fails to render pathless class names in IE8 #1300
Merged
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Ember's bindAttr helper relies on the bindClasses function to create the 'class=""' string for the element it's being called on. bindClasses gets passed the space separated string that we use in our Handlebars templates (ex. {{bindAttr class="thing:foo :baz"}}. When parsing the classes, bindClasses calls _parsePropertyPath, which uses split() to figure out the pathname and classname for the property.
In the past, split was passed a string to match against:
Today, we're using:
The problem with the regex implementation is that it returns inconsistent results in different browsers. Take the following:
In Chrome, Safari, Firefox, and IE9 we get:
In IE8, we get:
This causes all non-property classes (not sure what the terminology is, but I suppose you could call them 'literal' classes in the form ":foo") passed to bindAttr to fail to render in IE8. Given that passing a string to split returns the most consistent results across all browsers, this pull request includes a commit that changes the relevant _parsePropertyPath line to: