jsPlumb & bootstrap taps：连接显示不正确答案

【问题标题】：jsPlumb & bootstrap taps: Connections are not displayed correctlyjsPlumb & bootstrap taps：连接显示不正确
【发布时间】：2016-01-08 04:25:12
【问题描述】：

问题：我目前正在构建一个流程模拟。我有 2 个引导水龙头，一个包含一个编辑器（工作正常），另一个用于在模拟期间显示内容。 JsPlumb 用于显示不同的模拟对象。问题是如果点击从编辑器切换到模拟，这些对象之间的连接不能正确显示。在拖动元素后，它们“捕捉”到正确的位置，但我希望它们在点击开关上正确呈现。这是一个小提琴：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

【问题讨论】：

标签： javascript jquery html twitter-bootstrap jsplumb

【解决方案1】：

不是最佳解决方案，但可行：

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

此代码删除选项卡开关上的每个连接到模拟并调用重绘函数，该函数必须根据情况来实现（开始和端点要保存在某个地方，例如服务器）。

【讨论】：