Example of binding attribute to style

kc.js

export default Ember.Component.extend({
  attributeBindings: ['background:style'],
  size: 'medium',
  background: computed('user.[]', function() {
    const email = this.get('user.email');
    const size = this.get('size');
    const defaultAvatar = `//www.gravatar.com/avatar/${md5(email)}.jpg`;

    const avatar_path = this.get('user.avatar') ? this.get('user.avatar') : defaultAvatar;
    const color = this.get('calculateTheColor');

    let string = '';

    if(avatar_path) {
        string = 'background:url(' + avatar_path + ') no-repeat center; background-size:cover;';
    } else {
        string = 'background:' + color + ';';
    }

    let value = Ember.Handlebars.Utils.escapeExpression(string);
    return Ember.String.htmlSafe(value);
  }),
});