Data Attributes have a good place in this world (arguably, but that’s a point for a different thread maybe). It’s convenient to extend our tags with custom attributes without those tags having to know about them. Data-attributes decouples nicely the concerns (e.g. an anchor has an href, but doesn’t have a data-click-counter
). In Ember, we have many other abstractions, but often we have to interact with libraries that expect those attributes.
The problem now is that if we want to use data-attributes inside a handlebars template, we need to add the data-attribute to the attributeBindings array. Even when this is simple, it seems like a violation of concerns. Look at the following example, my ButtonDropdown
shouldn’t know anything about data-tracking-category
.
PF.ButtonDropdown = Ember.View.extend(PF.ValidationSupport, PF.TooltipSupport, {
attributeBindings: ['data-element', 'data-qa', 'data-tracking-category', 'data-tracking-page'],
In a couple of previous apps, we re-opened view to any data-* attribute to attributeBindings. The code is simple:
var keys = Ember.keys;
Ember.View.reopen({
init: function() {
var dataAttributes, view;
this._super();
view = this;
dataAttributes = keys(view).filter(function(key) {
return key.match('^data-');
});
return view.get('attributeBindings').pushObjects(dataAttributes);
}
});
This is the third time I see the need for it. Would it make sense to make it part of Ember? What do you think?