javascript - 如何在 React/Backbone 环境中删除 JSPlumb-Element？

Question

我有一个backbonejs模型集合，其中包含JSPlumb节点(ID、parentID)的模型。 DOM 表示由 React 处理(带有端点的 div)。如果我从集合中删除模型:

nodeCollection.remove(aNodeModel)

它与所有包含的组件一起从 DOM 中删除 - 很好。

如果我现在添加一个新节点，则不会添加端点。我将此问题追溯到 JSPlumb 中的一些内部:如果我执行

jsPlumb.remove(aNodeModel.id)

端点问题消失了，但我得到了一个React“不变违规”，因为aNodeModel没有从nodeCollection中删除。

如果我在从集合中删除模型之前手动删除 jsPlumb Endpoint:

jsPlumb.removeAllEndpoints(aNodeModel.id)

问题依然存在。

这感觉有点像僵局......有什么建议吗？

Answer 1

开源 roxx。

我通过向 jsPlumb .remove() 方法添加一个参数来控制 jsPlumb 内元素的实际 DOM 删除来解决这个问题。如果我将其设置为 false jsPlumb 会得到很好的清理，然后我可以让 React 删除实际的 DOM 元素:

jsPlumb.remove(sourceNodeID, false, [false]) 

这是我对 dom.jsPlumb-1.7.5.js 中的 jsPlumb 源代码第 5176 行和第 5210 行所做的更改。

var _doRemove = function(info, affectedElements, removeDOMElement) {
  _currentInstance.removeAllEndpoints(info.id, true, affectedElements);
  var _one = function(_info) {
    _currentInstance.getDragManager().elementRemoved(_info.id);
    _currentInstance.anchorManager.clearFor(_info.id);
    _currentInstance.anchorManager.removeFloatingConnection(_info.id);
    delete _currentInstance.floatingConnections[_info.id];
    delete managedElements[_info.id];
    delete offsets[_info.id];

    var actuallyRemoveDOMElement = true;            
    if (removeDOMElement.length > 0) {
      actuallyRemoveDOMElement = removeDOMElement[0];
    }

    if (_info.el) {
      if (actuallyRemoveDOMElement) {
        _currentInstance.removeElement(_info.el);
      }
      _info.el._jsPlumb = null;
    }
  };

  // remove all affected child elements
  for (var ae = 1; ae < affectedElements.length; ae++) {
    _one(affectedElements[ae]);
  }
  // and always remove the requested one from the dom.
  _one(info);
};


/**
 * Remove the given element, including cleaning up all endpoints registered for it.
 * This is exposed in the public API but also used internally by jsPlumb when removing the
 * element associated with a connection drag.
 */
this.remove = function (el, doNotRepaint, removeDOMElement) {
  var info = _info(el), affectedElements = [];
  if (info.text) {
    info.el.parentNode.removeChild(info.el);
  }
  else if (info.id) {
    _currentInstance.batch(function () {
      _doRemove(info, affectedElements, removeDOMElement);
    }, doNotRepaint === false);
  }
  return _currentInstance;
};