Question

我有一个TabContainer，我添加了ContentPanels。我的要求是，我每次都重新加载这个TabContainer（ContentPanels中的不同内容），我点击网格上的新行（从同一页面中的ajax生成）。最初，当我遇到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);
    });
}

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

Answer 1

在我看来，你的问题是destroyRecursive()调用中的“真实”，它指示dojo保留DOM。因此，您正在销毁已解决重复ID问题的小部件，但保留了生成的DOM;然后当你致电getTabPanelsForTheRow()时，它会在现有面板上生成3个新面板。

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

另外，每次点击一行时，你都会破坏并重新实例化你的面板小部件，为什么不在你的TabContainer中存储对你的contentPanes的引用，然后编写一个只破坏contentPanes的方法，清空TabContainer节点然后创建新窗格......

id已经注册了dojo

1 个答案: