Shopify/dashing

Avoid refreshing the list widget if the data is the same

Closed this issue · 3 comments

Hello everyone,

I've a little problem. I'm sending data to the List widget every 30 seconds.
I want to know if there is a batman filter to avoid data binding if the previous data is the same as the current data. Because there is a useless blinking each time I'm sending data on the list widget.

Thank you in advance.

Okay, I finally found an answer. I've recreated the DOM structure of the List Widget in the coffeescript file using JQuery.

can you share your code?

Yes, of course :

My list.coffee file (when I receive some data, I use JQuery to recreate the DOM and avoid the blinking):

class Dashing.List extends Dashing.Widget

  ready: ->
    if @get('unordered')
      $(@node).find('ol').remove()
    else
      $(@node).find('ul').remove()

  onData: (data) ->
  	console.log($(@node).find('ul.list-nostyle').find('li'))
  	$(@node).find('ul.list-nostyle').find('li').remove()

  	for elt in data.items
  		s = '<li>
  				<div data-bind-class="item.color" class="' + elt.color + '">
	    			<span class="label" data-bind="item.label">' + elt.label + '</span>
      				<span class="value" data-bind="item.value">' + elt.value + '</span>
    			</div>
  			</li>'
  		$(s).appendTo($(@node).find('ul.list-nostyle'));

My list.html file :

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

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

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

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