jsPlumb & bootstrap 水龙头:连接显示不正确

jsPlumb & bootstrap taps: Connections are not displayed correctly

问题: 我目前正在构建过程模拟。我有 2 个 bootstrap 个水龙头,一个包含一个编辑器(工作正常),另一个用于在模拟期间显示内容。 JsPlumb 用于显示不同的模拟对象。问题是如果点击从编辑器切换到模拟,这些对象之间的连接将无法正确显示。在拖动元素后它们 "snap" 到正确的位置,但我希望它们在点击开关上正确呈现。 这是一个fiddle:Problem fiddle
代码:

html:

 <div class="container-fluid">
       <ul class="nav nav-pills">
          <li class="active">
            <a href="#editor" data-target="#editor" data-toggle="tab">
              <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>Editor
            </a> 
          </li>
          <li>
             <a href="#display" data-target="#display" data-toggle="tab" id="testlink">
             <span class="glyphicon glyphicon-fast-forward" aria-hidden="true"></span> Simulation
            </a>
          </li>
       </ul>
    </div>
 <div class="tab-content">
    <div class="tab-pane fade in active" id="editor"> </div>

    <div class="tab-pane fade" id="display">
       <div class="container center-block content">
         <div id="test1" class="window">
            a
         </div>

         <div id="test2" class="window">
           b
         </div>
     </div>
   </div>

Javascript:

jsPlumb.ready(function() {
   jsPlumb.Defaults.Container = $('#display');


   jsPlumb.connect({
     source: $('#test1'),
     target: $('#test2'),
     anchor: "Continuous",
     endpoint: "Blank",
     detachable: false

   });

   jsPlumb.draggable($(".window"));

 });



我所知道的:问题直接与加载时不显示选项卡内容这一事实有关,因为将测试 div 放入编辑器点击(加载时处于活动状态)解决了问题。 fiddle: placing divs in aktive tab

不是最佳解决方案,但这个可行:

$('a[data-toggle="tab"]').on('shown.bs.tab', function (event) {
  if (event.target.id == 'display-tab') {
    jsPlumb.detachEveryConnection();
    redrawEveryConnection();
  }
});

此代码删除了标签切换到模拟的每个连接并调用重绘函数,该函数必须根据情况实现(起点和端点必须保存在某个地方,例如服务器)。