Dashing:更改小部件的背景颜色

时间:2015-03-07 20:44:03

标签: coffeescript background-color dashing

我会使用Dashing为我的仪表板创建一个新的小部件。使用服务器REST,我会收到十六进制代码颜色,并且我希望动态地使用它作为我的小部件的背景颜色。

我的工作,我接受了正确的颜色。但我无法动态改变背景颜色。

SCSS代码:

$background-color: #008000; /*default color*/

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


.widget-state {
   background: $background-color;
  font-size: 65px;
  font-weight: bold;   
}

我的小部件的咖啡脚本

  ready: ->
     # This is fired when the widget is done being rendered

  onData: (data) ->
    # Handle incoming data
    # You can access the html node of this widget with `@node`

    @accessor 'value', Dashing.AnimatedValue

    @accessor 'FCurrentColor', Dashing.AnimatedValue

    @accessor 'FCurrentState', Dashing.AnimatedValue

    $(@node).fadeOut().css('background-color', @get('FCurrentColor')).fadeIn()

最后一行必须改变背景颜色,不是吗?但它没有用。

1 个答案:

答案 0 :(得分:1)

现在,背景的动态颜色有效。我已经设置了ready部分并从onData中提取@accessor。

class Dashing.State extends Dashing.Widget
  @accessor 'FCurrentColor', Dashing.AnimatedValue

  @accessor 'FCurrentState', Dashing.AnimatedValue

  @accessor 'FPreviousState', Dashing.AnimatedValue

  ready: ->

    # This is fired when the widget is done being rendered      

    $(@node).css('background-color',@get('FCurrentColor'))


  onData: (data) ->
    # Handle incoming data
    # You can access the html node of this widget with `@node`
    # Example: $(@node).fadeOut().fadeIn() will make the node flash each time data comes in.


    if data.FCurrentState isnt data.FPreviousState
      $(@node).fadeOut().css('background-color',@get('FCurrentColor')).fadeIn()