Dashing动态更改背景颜色小部件

时间:2017-09-14 22:32:57

标签: shopify dashing

我有一个小部件,它会从声纳中提取数据,并检查是否有任何阻止者或关键词。如果阻止者和关键词为0,则背景颜色应为蓝色,否则为红色,默认为scss。

我的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;
}

0 个答案:

没有答案