shopify/Dashing研讨会coffeescript语法问题

Question

我目前正在从事一个项目，该项目正在采取积极的检查饲料从纳吉奥斯Check_mk，并显示在一个文本小工具。我正在尝试让小工具改变颜色，通过研讨会页面，我被咖啡脚本卡住了，当值改变时，它似乎没有任何影响。这是我所拥有的

alert.coffee

class Dashing.Alert extends Dashing.Widget

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
# Example: $(@node).fadeOut().fadeIn() will make the node flash each time data comes in.

@accessor 'value', Dashing.AnimatedValue

@accessor 'isTooHigh', ->
@get('value') > 200

警报scss

 .widget-alert {
background: #00ff99; 
font-size: 65px; 
font-weight: bold; 
}

.danger {
background: #ff1a00;
}

所有其他文件都与研讨会页面中的详细信息完全相同:如有任何帮助，非常感谢。

Answer 1

基本上，颜色的改变或颜色的动画闪烁是由scss @keyframe规则处理的，您必须将其绑定到选择器，否则动画将不起作用

下面是一些例子

    $background-alert-color-1: #FFFF66;
    $background-alert-color-2: #FF9618;
    $text-alert-color: #fff;


    @-webkit-keyframes status-alert-background {
      0%   { background-color: $background-alert-color-1; }
      50%  { background-color: $background-alert-color-2; }
      100% { background-color: $background-alert-color-1; }
    }

    .widget.status-alert {
      color: $text-alert-color;
      background-color: $background-alert-color-1;
      @include animation(status-alert-background, 2s, ease, infinite);

      .icon-alert-sign {
        display: inline-block;
      }

     .title, .more-info {
      color: $text-alert-color;
    }

对于一些示例和参考(也适用于咖啡脚本)，您可以查看以下dashing_zabbix