Dashing-rails：如何更改小部件的背景颜色以反映布尔数据值？答案

【问题标题】：Dashing-rails: how to change a widget's background color to reflect boolean data-value?Dashing-rails：如何更改小部件的背景颜色以反映布尔数据值？
【发布时间】：2019-12-15 16:50:06
【问题描述】：

我正在使用dashing-rails 并尝试根据从 API 返回的布尔值将小部件的背景颜色更改为绿色/红色。我有一份工作：

Dashing.scheduler.every '1m', first_in: 8 do
  Dashing.send_event('all_good', status: MixpanelHelper.all_good?)
end

一个小部件，其咖啡脚本包括：

onData: (data) ->
  if data.status
    $(@node).css('background-color', '#42b2aa')
  else
    $(@node).css('background-color', '#e85c28')

还有一个仪表盘，其erb包括：

    <div data-id="all_good" data-view="Mywidget" data-title="All good" data-goal="95%" data-suffix="%"></div>

但是颜色变化没有被触发。我没有正确传递我的数据吗？

【问题讨论】：

标签： ruby-on-rails dashing

【解决方案1】：

几天前我刚开始使用 Dashing，我遇到了同样的问题。我解决它的方法是把它放在两个地方，都准备好了：和onData：这样的事件。

  ready: ->
    # This is fired when the widget is done being rendered
    @setColor(@get('status'))

  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.
    @setColor(@get('status'))
    $(@node).fadeOut().fadeIn()

  setColor: (status) ->
    if status
      switch status
          when 'RUN' then $(@node).css("background-color", "#29a334") #green
          when 'FAIL' then $(@node).css("background-color", "#b80028") #red
          when 'PEND' then $(@node).css("background-color", "#ec663c") #orange
          when 'HOLD' then $(@node).css("background-color", "#4096ee") #blue

我认为这不是最好的解决方案，可能还有另一个可以使用的事件，一个我还不知道的事件，如果我发现它会更新这个答案，但与此同时你可能想要使用这个.

【讨论】：

【解决方案2】：

sammydc 的回答是正确的。在创建新小部件（名称 = xzryryrk）时，根据我的经验添加更多信息（我今天第一次使用 dashing）：

运行这个命令来创建一个新的小部件：

dashing generate widget xzryryrk

输出：

widgets/xzryryrk/xzryryrk.html
widgets/xzryryrk/xzryryrk.scss
widgets/xzryryrk/xzryryrk.coffee

编辑“xzryryrk.coffee”以添加上面帖子中 sammydc 提到的代码，但请记住空格和制表符。破折号基于对空格和制表符敏感的语言。

Edit 'xzryryrk.scss' : 默认情况下，新小部件没有任何 css 配置，您需要添加以下 css（根据您的要求编辑名称）：

$background-color:  #47bbb3;
$title-color:       rgba(255, 255, 255, 0.7);
$moreinfo-color:    rgba(255, 255, 255, 0.7);

// ----------------------------------------------------------------------------
// Widget-text styles
// ----------------------------------------------------------------------------
.widget-xzryryrk {

  background-color: $background-color;

  .title {
    color: $title-color;
  }

  .more-info {
    color: $moreinfo-color;
  }

  .updated-at {
    color: rgba(255, 255, 255, 0.7);
  }


  &.large h3 {
    font-size: 65px;
  }
}

编辑 'xzryryrk.html' ：默认情况下它也是空白的。添加以下内容：

<h1 class="title" data-bind="title"></h1> <h3 data-bind="text"></h3> <p class="more-info" data-bind="moreinfo"></p> <p class="updated-at" data-bind="updatedAtMessage"></p>

最后，编辑您的 erb 文件（可能是 /dashing/dashboards/sample.erb）

    `<li data-row="1" data-col="1" data-sizex="2" data-sizey="1">
    <div data-id="xzryryrk" data-view="Xzryryrk" data-title="Hello" data-text="This is your shiny new dashboard." data-moreinfo="Protip: You can drag the widgets around!"></div>
    </li>`

现在你可以像这样使用 CURL 了：

`curl -d '{ "auth_token": "YOUR_AUTH_TOKEN", "title":"XXX" ,"status": "FAIL" ,"text":"FAIL"}' http://X.X.X.X:8082/widgets/xzryryrk`

【讨论】：