id已经注册了dojo

Question

我有一个TabContainer，我正在向其中添加ContentPanels。我的要求是，每次我都要重新加载这个TabContainer（在ContentPanels中有不同的内容），在网格上单击一个新行（在同一页面中由ajax生成）。最初，当我遇到id已经注册的问题时，我使用了destroyRecursive，正如这里的一个答案中所建议的那样。现在，在使用它之后，我得到了以下结果：

结果在我点击任何一行后，第一次：就像我想要的那样，使用容器和3个内容窗格。

单击任何一行、第二次和任何其他时间后的结果：具有3个内容窗格的新容器被放置在具有3个属性窗格的旧容器的顶部。不管我点击了多少行，结果总是有两个容器，新的容器放在旧的容器之上。

下面是我使用过的代码。

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

每次单击一行，我首先调用destroyTabPanel（），然后调用getTabPanelsForTheRow（）。

Answer 1

在我看来，您的问题是destroyRecursive()调用中的"true"，该调用指示dojo保留DOM。因此，您正在销毁小部件，这些小部件解决了重复id问题，但生成的DOM得到了保留；那么当您调用CCD_ 2时，它将在现有面板上生成3个新面板。

您要做的是，在调用destroyRecursive()之后，清空容器"tabPanel"：domConstruct.empty("tabPanel")，然后再调用getTabPanelsForTheRow()。

顺便说一句，每次单击一行时，您都会销毁并重新实例化面板小部件，为什么不在TabContainer中存储对contentPanes的引用，然后编写一个只销毁contentPanes，清空TabContainer节点，然后创建新窗格的方法呢。。。