Dashing：小部件未在 load/reload 更新，直到作业刷新数据（CSS 转换未初始化）

Question

我不了解这个 html/coffee/scss 东西。 (ruby 可以) 我正在使用这里的热门列表小部件：https://gist.github.com/andre-morassut/8705385 它有效，但是当 loading/reloading 浏览器中的页面时，我得到空的小部件，直到作业再次运行。一般来说，数据应该是可用的。 "more-info" 字段也由同一个作业设置，并且从一开始就可见。我真的很感激一些帮助。我的工作目前每分钟安排一次，但我希望每小时更新一次（由于服务器查询运行ning 在工作中）

我想，这是 scss 中的这种转换问题？我不需要转换。

提前致谢

我的工作看起来像

    sendEventData(Buildbot.getBuildData(BUILDBOTCFG, 'clang'), 'clang')
    sendEventData(Buildbot.getBuildData(BUILDBOTCFG, 'gcc'), 'gcc')

    #...


    def sendEventData(myData, eventHandler)
      itemarray = [
      #{label: 'at', value: 'result'},
        {label: (myData[:current][:end] == nil) ? myData[:current][:start] : myData[:current][:end], value: myData[:current][:state]},
       {label: (myData[:previous][:end] == nil) ? myData[:previous][:start] : myData[:previous][:end], value: myData[:previous][:state]}
      ];

    case myData[:current][:state]
      when 'successful'
        heat = 1
      when 'pending'
        case myData[:previous][:state]
      when 'successful'
        heat = 1
      else
        heat =10
      end
      else
        heat = 10
      end

    datastruct = {
     items: itemarray,
     hotnessvalue:heat  
    }

    send_event(eventHandler, datastruct)
    send_event(eventHandler, {moreinfo: 'Current BuildNo ' + myData[:current][:revisions].to_s})
    end

hotlist.coffee 长得像

    class Dashing.Hotlist extends Dashing.Widget
      ready: ->
        if @get('unordered')
          $(@node).find('ol').remove()
        else
          $(@node).find('ul').remove()

      onData: (data) ->
       node = $(@node)
       value = parseInt data.hotnessvalue
       cool = parseInt node.data "cool"
       warm = parseInt node.data "warm"
       level = switch
        when value <= cool then 0
        when value >= warm then 4
       else 
         bucketSize = (warm - cool) / 3 # Total # of colours in middle
         Math.ceil (value - cool) / bucketSize

      backgroundClass = "hotness#{level}"
      lastClass = @get "lastClass"
      node.toggleClass "#{lastClass} #{backgroundClass}"
      @set "lastClass", backgroundClass

hotlist.hmtl

    <h1 class="title" data-bind="title"></h1>

    <ol>
     <li data-foreach-item="items">
      <span class="label" data-bind="item.label"></span>
      <span class="value" data-bind="item.value"></span>
     </li>
    </ol>

<ul class="list-nostyle">
  <li data-foreach-item="items">
    <span class="label" data-bind="item.label"></span>
    <span class="value" data-bind="item.value"></span>
  </li>
</ul>

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

scss

    //        ----------------------------------------------------------------------------
    // Mixins
    //     ----------------------------------------------------------------------------
    @mixin transition($transition-property, $transition-time, $method) {
      -webkit-transition: $transition-property $transition-time $method;
      -moz-transition: $transition-property $transition-time $method;
      -o-transition: $transition-property $transition-time $method;
      transition: $transition-property $transition-time $method;
    }

    //    ----------------------------------------------------------------------------
    // Sass declarations
    //    ----------------------------------------------------------------------------
    $background-color:  #12b0c5;
    $value-color:       #fff;

    $title-color:       rgba(255, 255, 255, 0.9);
    $label-color:       rgba(255, 255, 255, 0.9);
    $moreinfo-color:    rgba(2, 2, 2, 0.6);

    // ----------------------------------------------------------------------------
    // Widget-list styles
    // ----------------------------------------------------------------------------
    .widget-hotlist {

       background-color: $background-color;
       vertical-align: top !important;
      @include transition(background-color, 0.5s, linear);

      .title {
        color: $title-color;
        font-weight: 800;
      }

      ol, ul {
        margin: 0 15px;
        text-align: left;
        color: $label-color;
      }

      ol {
         list-style-position: inside;
      }

      li {
        margin-bottom: 5px;
      }

      .list-nostyle {
        list-style: none;
      }

      .label {
         color: $label-color;
       }

          .value {
            float: right;
            margin-left: 12px;
            font-weight: 800;
            color: $value-color;
          }

          .updated-at {
            color: rgba(0, 0, 0, 0.3);
          }

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

    }
    .hotness0 { background-color: #00C176; }
    .hotness1 { background-color: #88C100; }
    .hotness2 { background-color: #FABE28; }
    .hotness3 { background-color: #FF8A00; }
    .hotness4 { background-color: #FF003C; }

Answer 1

这就是 Dashing 的工作原理。在您第一次运行之前，小部件的数据不会输入。

为什么不在 "SCHEDULER.every ..." 之前先流式传输数据？这应该首先设置小部件，然后等到新数据的下一次计划刷新。

Dashing：小部件未在 load/reload 更新，直到作业刷新数据（CSS 转换未初始化）

Dashing: Widget not updated on load/reload until job refreshes data (CSS Transition not initilized)

html

css

sass

css-transitions

dashing