Geek Answers Handbook

Meteor avoids double updates when a third-party widget changes its reactive data source

I have jsTree which I am trying to bi-directionally "connect" to the Meteor collection. Right now, I automatically run jsTree.refresh() whenever the collection is updated with .observeChanges :

 FileTree.find().observeChanges({ added: function() { $.jstree.reference('#fileTree').refresh(); }, changed: function() { $.jstree.reference('#fileTree').refresh(); }, removed: function() { $.jstree.reference('#fileTree').refresh(); } });

I want to enable database editing by dragging things into jsTree. Here's what it would look like:

  • The user drags the item to a new location.
  • jsTree updates the location of an item in the tree.
  • jsTree calls an event handler
  • Event Handler Database Updates

My problem is that if I understand everything correctly, it is that updating the database will raise the observeChanges event that I set earlier. This will cause another tree update. This causes an annoying flicker that interrupts users. (i.e. the file browser will not be suitable for approximately 0.75 s after each drag and drop operation.)

How can I prevent this unnecessary update, or is there a better way to structure my interface with jsTree that would prevent this problem.

+7
javascript javascript-events meteor jstree
source share
1 answer

Did you see that?

It looks like he is using autorun vs. observeChanges , but basically the same concepts as yours:

 Template.showtree.rendered = function(){ var self = this; var nodes = []; Nodes1 = $('#tree1').tree(); Nodes2 = $('#tree2').tree(); if (!self.handle){ self.handle = Meteor.autorun(function(){ // refresh trees on new data nodes = Nodes.find(); Nodes1.tree('option', 'data', 'Projects'); Nodes2.tree('option', 'data', 'Contexts'); }); //self.handle } // if (!self.handle) }

If this is something that only one user will edit (at a time), maybe you just don’t update based on the database updates and leave the tree as an interface for the author, only.

If it needs to be updated based on database updates (from other users or just for synchronization), you can consider changing your workflow / logic:

  • event changed.jstree , locally updates the database, blocking
  • autorun launches update in jstree

which theoretically should only lead to 1 update versus 2 or 3

Or, if you really want to limit repeated draws ... you can find the old parent node and the new parent node , and only we refresh_node(obj) update only those node changes:

refresh_node (obj)

updates the node in the tree (reloads its children) all open nodes inside the node are reloaded with load_node calls.

+2
source share

More articles:


All Articles