以编程方式控制 Dojo Accordion

Question

我的页面上有一个 dijit.layout.AccordionContainer，它是在 html 中定义的，并在 dojo 加载时解析页面时创建。

然后，当用户与页面交互时，我使用 Ajax 检索数据并以编程方式填充容器（首先删除现有项目）。

为了简单地说明我的问题，这里有一些不起作用的代码：

   function doit() {
        var accordion = dijit.byId("accordionShell");
        accordion.getChildren().each(function(item) {
            accordion.removeChild(item);
        });
        for (i = 1; i < 5; i++) {
            var d = new dijit.layout.AccordionPane({title:'hello', content:'world'});
            accordion.addChild(d);
        }
    }

这会失败，因为只有手风琴中的第一项可见。 我认为其他的确实存在，但它们不可见，所以你无能为力。

我设法通过以下方式解决这个问题：

1. 始终确保手风琴中有 1 个项目（所以我从不删除第一个子项）
2. 更改内容后调用 Accordian.layout()

因此，只要您总是这样，此代码就“有效”想要查看第一项，并且实际上除了第一项之外不展开任何项：

   function doit() {
        var accordion = dijit.byId("accordionShell");
        var i = 0;
        accordion.getChildren().each(function(item) {
            if (i > 0) accordion.removeChild(item);
            i++;
        });
        for (i = 1; i < 5; i++) {
            var d = new dijit.layout.AccordionPane({title:'hello', content:'world'});
            accordion.addChild(d);
        }
        accordion.layout();

    }

我正在使用 Dojo 1.2.0 - 有人知道我做错了什么吗？

Answer 1

如果我没记错的话...你应该这样做...

  pane1half = new dijit.layout.ContentPane({id: "pane1half", title: "hello", content: "world"});

87 Accordion.addChild(pane1half, 1);

Answer 2

我相信我发现了一个问题 - Accordian.removeChild() 还不够。 如果你摧毁它，那么行为似乎是正确的。 我不知道你是否必须两者都做，或者单独销毁是否就足够了。

因此，删除现有项目的代码变为：

accordion.getChildren().each(function(item) {
        if(i>0) {
            accordion.removeChild(item);
            item.destroy();
        }
        i++;
});

我正在通过在第一项中添加“帮助信息”来解决此限制...

Answer 3

我每次都会创建一个新的 AccordionContainer，添加 AccordionPane 子项，然后执行以下操作：

oldAccordion.domNode.parentNode.replaceChild(
  newAccordion.domNode,
  oldAccordion.domNode
);

oldAccordion.destroyRecursive();
newAccordion.startup();