title: Dashing: Widget not updated on load/reload until job refreshes data (CSS Transition not initilized)
body: <p>I have no understanding of this html/coffee/scss stuff. (ruby is ok)
  I'm using this hotlist widget from here: <a href="https://gist.github.com/andre-morassut/8705385" rel="nofollow">https://gist.github.com/andre-morassut/8705385</a>
  It works but when loading/reloading the page in the browser I get empty widgets until the job is run again. In general the data should be available. The "more-info" field is also set by the same job and is visible from start.
  I'd really appreciate some help. My job is currently scheduled every minute but I want an update every hour, only (due to the server queries which are running within the job)</p>
  
  <p>I guess, that it is an issue with this transitions stuff in the scss? I don't need transitions.</p>
  
  <p>Thanks in advance</p>
  
  <p>My job looks like</p>
  
  <pre><code>    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
  </code></pre>
  
  <p>hotlist.coffee looks like</p>
  
  <pre><code>    class Dashing.Hotlist extends Dashing.Widget
        ready: -&gt;
          if @get('unordered')
            $(@node).find('ol').remove()
          else
            $(@node).find('ul').remove()
  
        onData: (data) -&gt;
         node = $(@node)
         value = parseInt data.hotnessvalue
         cool = parseInt node.data "cool"
         warm = parseInt node.data "warm"
         level = switch
          when value &lt;= cool then 0
          when value &gt;= 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   
  </code></pre>
  
  <p>hotlist.hmtl</p>
  
  <pre><code>    &lt;h1 class="title" data-bind="title"&gt;&lt;/h1&gt;
  
      &lt;ol&gt;
       &lt;li data-foreach-item="items"&gt;
        &lt;span class="label" data-bind="item.label"&gt;&lt;/span&gt;
        &lt;span class="value" data-bind="item.value"&gt;&lt;/span&gt;
       &lt;/li&gt;
      &lt;/ol&gt;
  
  &lt;ul class="list-nostyle"&gt;
    &lt;li data-foreach-item="items"&gt;
      &lt;span class="label" data-bind="item.label"&gt;&lt;/span&gt;
      &lt;span class="value" data-bind="item.value"&gt;&lt;/span&gt;
    &lt;/li&gt;
  &lt;/ul&gt;
  
  &lt;p class="more-info" data-bind="moreinfo"&gt;&lt;/p&gt;
  &lt;p class="updated-at" data-bind="updatedAtMessage"&gt;&lt;/p&gt;
  </code></pre>
  
  <p>scss</p>
  
  <pre><code>    //        ----------------------------------------------------------------------------
      // 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; }
  </code></pre>