Bug

components.component-that-updates.js

import Ember from 'ember';
const { computed } = Ember;

export default Ember.Component.extend({
  backgroundColor: computed('model.backgroundColor', {
    get() {
      return this.get('model.backgroundColor');
    },
    set(key, val) {
      if (val && !/^#/.test(val) && val !== 'transparent') {
        val = `#${val}`;
      }
      this.set('model.backgroundColor', val);
      return val;
    }
  }),
  actions: {
    colorChanged(color) {
      this.set('backgroundColor', color);
      this.set('model.backgroundType', 'color');
      this.set('model.backgroundImage', null);
    }
  }
});

controllers.application.js

import Ember from 'ember';
const { computed } = Ember;

export default Ember.Controller.extend({
  model: null,
  backgroundStyle: computed('model.cover.backgroundColor', function() {
    let backgroundColor = this.get('model.cover.backgroundColor');
    if (backgroundColor) {
      return `background-color: ${backgroundColor};`;
    }
  }),
  bgStyle: computed.readOnly('backgroundStyle')
});

helpers.background-style.js

import Ember from 'ember';
const htmlSafe = Ember.String.htmlSafe;
const escape = Ember.Handlebars.Utils.escapeExpression;

export default Ember.Helper.helper(function ([color]) {
  if (!color) {
    return;
  }

  if (color) {
    return htmlSafe(`background: ${escape(color)}`);
  }
});

routes.application.js

import Ember from 'ember';

export default Ember.Route.extend({
  model() {
    let model = Ember.Object.create({
      cover: Ember.Object.create({
        backgroundColor: null
      })
    });
    return model;
  }
});

templates.application.hbs

<br>Broken: <div class="with-text-broken">{{backgroundStyle}}</div>
<br>Workaround: <div class="with-text-workaround">{{bgStyle}}</div>
<br>
<br>

{{component-that-updates model=model.cover}}
<br>
<br>

templates.components.component-that-updates.hbs

<button onclick={{action 'colorChanged' 'C72410'}} class="color-change-button">Click me to set color</button>

twiddle.json

{
  "version": "0.10.7",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "2.10.2",
    "ember-template-compiler": "2.10.0",
    "ember-testing": "2.10.0"
  },
  "addons": {}
}