Data-attribute for Views


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;
  init: function() {
    var dataAttributes, view;
    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?