Avoid refreshing the list widget if the data is the same
Closed this issue · 3 comments
laurentTVB commented
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.
laurentTVB commented
Okay, I finally found an answer. I've recreated the DOM structure of the List Widget in the coffeescript file using JQuery.
Deleted user commented
can you share your code?
laurentTVB commented
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>