Remove empty attribute bindings in Ember components

Question

I'm trying to make an Ember Component for clickable icons in a new project (an getting to know Ember in the process) and have run into an issue with attribute bindings:

How do I remove empty attribute bindings from the rendered HTML?

According to the official guides I can either bind to a string or number to let the attribute be poppulated with the string/number or bind to a boolean to toggle the attribute (assuming attributes and class names follow the same structure), but if I pass a boolean false to remove the attribute, its value is just set to the string "false".

Component code

export default Ember.Component.extend({
  tagName: 'i',
  classNameBindings: ['icon'],
  attributeBindings: ['title', 'roleAttribute:role'],
  icon: 'blank', // Defaults to a blank icon
  title: '', // Defualts to empty title
  click() {
    this.sendAction();
  },
  roleAttribute: function() {
    return this.get('action') ? 'button' : false;
  }.property()
});

Usage in template

{{ui-icon icon="close" title="Close" action="hide"}}
{{ui-icon icon="close" title="Close"}}

Expected result (Ember ID's and class names removed for clarity)

<i role="button" title="Close" class="close"></i>
<i title="Close" class="close"></i>

Real result (Ember ID's and class names removed for clarity)

<i role="button" title="Close" class="close"></i>
<i role="false" title="Close" class="close"></i>

If I pass an empty string instead of false I still get the role, but without a value assigned, but I want no role at all.

blessenm blessenm · Accepted Answer · 2016-01-08T09:25:28

Based on this comment in the issue thread you should return null instead of false to remove an attribute.

Here is the working demo

Remove empty attribute bindings in Ember components

1 Answers