id 이미 등록 된 도장

Question

TabContainer가 있습니다. 여기에 ContentPanels을 추가합니다. 내 요구 사항은, 나는이 TabContainer (ContentPanels의 다른 내용)를 매번 다시로드해야한다고 가정합니다. 동일한 페이지의 아약스에서 생성 된 그리드의 새 행을 클릭합니다. 처음에는 id가 이미 등록되어있는 문제가 발생했을 때 여기에 나온 대답 중 하나에서 제안한 것처럼 destroyRecursive를 사용했습니다. 이제 그 결과를 얻은 후 다음 결과를 얻었습니다.

결과 행을 클릭 한 후 처음으로 컨테이너와 3 개의 내용 창과 함께 원하는 결과를 얻었습니다.

행, 두 번째 시간 및 다른 시간 중 하나를 클릭하면 결과가 표시됩니다. 3 개의 내용 창이있는 새 컨테이너는 3 개의 내용 창이있는 이전 컨테이너 위에 배치됩니다. 아무리 많은 클릭 만해도 결과에는 항상 2 개의 컨테이너가 있으며 새 컨테이너는 이전 컨테이너 위에 배치됩니다.

다음은 코드입니다.

<div id = "tabsContainer"> 
    <div id="tabPanels" data-dojo-type = "dijit/layout/TabContainer"></div> 
    </div> 

function getTabPanelsForTheRow() { 
     require(["dijit/layout/TabContainer", 
     "dijit/layout/ContentPane"], function (TabContainer, ContentPane) { 
      var tc = new TabContainer({}, "tabPanels"); 

      var cp1 = new ContentPane({ 
       title: "Contacts", 
       content: "These are the activities" 
      }); 
      tc.addChild(cp1); 

      var cp2 = new ContentPane({ 
       title: "Activities", 
       content: "These are the activities" 
      }); 
      tc.addChild(cp2); 

      var cp3 = new ContentPane({ 
       title: "Opportunities", 
       content: "We are known for our drinks." 
      }); 
      tc.addChild(cp3); 

      tc.startup(); 
     }); 
    } 

    function destroyTabPanel() { 
     require(["dijit/layout/TabContainer"], function (TabContainer) { 
      var tp = dijit.byId("tabPanels"); 
      tp.destroyRecursive(true); 
    }); 
} 

매번, I 행을 클릭 I가 destroyTabPanel 호출 M() 우선, 다음 I는 getTabPanelsForTheRow 호출 M().

Answer 1

DOM을 보존하기 위해 dojo에 지시하는 destroyRecursive() 호출에서 사용자의 문제처럼 보이는 것이 "사실"입니다. 따라서 중복 ID 문제를 해결했지만 생성 된 DOM은 보존 된 위젯을 파괴하고 있습니다. getTabPanelsForTheRow()으로 전화하면 기존 패널 위에 3 개의 새 패널이 생성됩니다.

destroyRecursive()을 호출 한 후 getTabPanelsForTheRow()으로 전화하기 전에 컨테이너를 비 웁니다.

참고로, 행을 클릭 할 때마다 패널 위젯을 파괴하고 다시 인스턴스화합니다. TabContainer 내에 contentPanes에 대한 참조를 저장 한 다음 contentPane만을 비우는 메소드를 작성하거나 비워 두는 것이 좋습니다. TabContainer 노드를 만들고 새 창을 만듭니다.