延迟:小部件在加载/重新加载时不更新，直到作业刷新数据(CSS过渡未初始化)

Question

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

我猜，这是一个问题与这个过渡的东西在scss?我不需要过渡

Thanks in advance

我的工作看起来像

    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

活动表。咖啡看起来像

    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

这就是动态刷新的工作原理。小部件的数据只有在第一次运行时才会输入。

你为什么不在"SCHEDULER "之前先流式传输数据呢?每一个……"?这应该首先设置小部件，并将等待下一次计划的新数据刷新。