shopify/Dashing 研讨会咖啡脚本语法问题答案

【问题标题】：shopify/Dashing workshop coffeescript syntax issueshopify/Dashing 研讨会咖啡脚本语法问题
【发布时间】：2014-10-09 14:44:17
【问题描述】：

我目前正在从事一个项目，该项目正在从 Nagios 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;
}

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

【问题讨论】：

标签： dashing

【解决方案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

【讨论】：