0

我有一个 TabContainer，我正在向其中添加 ContentPanel。我的要求是，我每次都重新加载这个 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()。

4

1 回答 1

0

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

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

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

于 2013-07-25T17:48:43.940 回答