I use an attribute binding to bind the aria-checked property to a custom component:
attributeBindings: [
'checked:aria-checked'
],
I expect the attribute aria-checked to be either true or false depending on the value of the checked attribute. But the aria-checked attribute is always missing. I debugged this case a bit and found out that aria-checked is set as a property (using $.prop) in the applyAttributeBindings method. I assume that it should be set using $.attr instead. So in my opinion, the first if branch should also handle boolean values. Does it make sense? A bug or an intended behavior? other aria attributes are shown as attributes - e.g. aria-labelledby. But I assume it’s because the value type is string in this case.
Ember 1.8.1
View.applyAttributeBindings = function(elem, name, value) {
var type = typeOf(value);
// if this changes, also change the logic in ember-handlebars/lib/helpers/binding.js
// missing boolean type here??
if (name !== 'value' && (type === 'string' || (type === 'number' && !isNaN(value)))) {
if (value !== elem.attr(name)) {
elem.attr(name, value);
}
} else if (name === 'value' || type === 'boolean') {
if (isNone(value) || value === false) {
// `null`, `undefined` or `false` should remove attribute
elem.removeAttr(name);
// In IE8 `prop` couldn't remove attribute when name is `required`.
if (name === 'required') {
elem.removeProp(name);
} else {
elem.prop(name, '');
}
} else if (value !== elem.prop(name)) {
// value should always be properties
elem.prop(name, value);
}
} else if (!value) {
elem.removeAttr(name);
}
};