dashing-js list no flickering

README.md

Original list widget in dashing flickers annoyingly, as also mentioned here. That's simply because the widget redraws the complete list every time there's an update from the server side.

See the problem here (Buzzwords widget flickers)

This widget, on the other hand, is an alternative and a drop-in replacement for the original list widget. It simply creates the list elements beforehand and updates the values inline so that the widget is rendered without any flickering.

Live demo

list.coffee

class Dashing.List extends Dashing.Widget
  onData: (data) ->
    for value, index in data.items
      $(@node).find('ul li:nth-child(' + (index+1).toString() + ')' + ' span.value').text(value.value)
      $(@node).find('ul li:nth-child(' + (index+1).toString() + ')' + ' span.label').text(value.label)

list.html

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

<ul class="list-nostyle">
  <li>
    <span class="label"></span>
    <span class="value"></span>
  </li>
  <li>
    <span class="label"></span>
    <span class="value"></span>
  </li>
  <li>
    <span class="label"></span>
    <span class="value"></span>
  </li>
  <li>
    <span class="label"></span>
    <span class="value"></span>
  </li>
  <li>
    <span class="label"></span>
    <span class="value"></span>
  </li>
  <li>
    <span class="label"></span>
    <span class="value"></span>
  </li>
  <li>
    <span class="label"></span>
    <span class="value"></span>
  </li>
  <li>
    <span class="label"></span>
    <span class="value"></span>
  </li>
  <li>
    <span class="label"></span>
    <span class="value"></span>
  </li>
</ul>

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

Can you try with the following scss file instead of the one within dashing-icinga2 project?

https://github.com/kivancsahici/dashing_sample/blob/master/widgets/list/list.scss