Shopify 动态改变背景颜色小部件

我有一个小部件，它可以从声纳获取数据，并检查是否有任何拦截器或关键设备。如果拦截器和临界值为0，则背景颜色应为蓝色，否则为红色，这是SCS中的默认值

My Job.rb有一个逻辑来检查它是否为0，并将布尔值存储到变量“failed”中

我的咖啡剧本有以下逻辑：

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()

背景色保持红色，这是.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;
}