我会使用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()
最后一行必须改变背景颜色,不是吗?但它没有用。
答案 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()