Dashing Change back ground color widget dynamically

Question

I have a widget which brings the data from sonar and checks if there are any blockers or criticals. If the blockers and criticals are 0, background colors should be blue, else it is red which is default in scss.

My Job.rb has a logic to check if it is 0 and store the boolean value to a variable "failed".

And my coffee script has the below logic:

class Dashing.SonarColor extends Dashing.Widget

  @accessor 'bgColor', ->
    if data.failed
      "#12b0c5"
    else
      "red"

  ready: ->
    if @get('unordered')
      $(@node).find('ol').remove()
    else
      $(@node).find('ul').remove()

  onData: (data) ->
    if data.currentResult isnt data.lastResult
      $(@node).fadeOut().css('background-color', @get('bgColor')).fadeIn()

Background color remains red which is the default set in .scss

$background-color:  #FF0000;
$value-color:       #fff;

$title-color:       rgba(255, 255, 255, 0.7);
$label-color:       rgba(255, 255, 255, 0.7);
$moreinfo-color:    rgba(255, 255, 255, 0.7);


.widget-sonar-color {
  background-color: $background-color;
  vertical-align: top;
}