javascript - 当第三方小部件更改它自己的 react 数据源时，Meteor 避免双重刷新

Question

我有一个 jsTree，我正试图双向“连接”到一个 Meteor 集合。现在，只要集合在 .observeChanges 的帮助下更新，我就会自动触发 jsTree.refresh():

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

我想允许通过在 jsTree 中四处拖动来编辑数据库。这是它的样子:

1. 用户将元素拖到新位置。
2. jsTree 更新元素在树中的位置。
3. jsTree 调用事件处理器
4. 事件处理器更新数据库

我的问题是，如果我理解正确的话，数据库更新会触发我之前设置的 observeChanges 事件。这将导致树的另一次刷新。这会导致烦人的闪烁，从而打扰用户。 (即文件浏览器在每次拖放操作后大约 0.75 秒内无法使用。)

我怎样才能避免这个不必要的更新，或者有没有更好的方法来构建我的 jsTree 界面来防止这个问题。

Answer 1

你见过吗？

• https://github.com/tobkle/meteor-jstree-example
• https://github.com/tobkle/meteor-jstree

看起来他/她使用的是autorun vs. observeChanges 但大部分概念与你的相同:

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)
}

如果这是只有一个用户会(一次)编辑的内容，那么您可能只是根据数据库更新不刷新它，并将树作为作者的界面，仅。

如果它需要根据数据库更新(来自其他用户，或者只是为了同步)进行刷新，您可以考虑更改您的工作流程/逻辑:

1. changed.jstree事件，在本地更新数据库，阻塞
2. autorun触发jstree中的刷新

从理论上讲，这应该只会导致 1 次刷新，而不是 2 次或 3 次

或者如果你真的想限制重新绘制......你可以找到旧父节点和新父节点并且只有我们refresh_node( obj) 以仅刷新那些更改节点:

refresh_node (obj)

refreshes a node in the tree (reload its children) all opened nodes inside that node are reloaded with calls to load_node.