Dojo：通过DOM节点销毁所有小部件

Question

我的内容通过ajax被替换，但有时一个元素在两个页面上具有相同的id（例如，主页上的照片在画廊页面上具有相同的id）。这意味着当调用dojo.parser.parse时，小部件正在尝试被重新添加，会引发以下错误：

Error: Tried to register widget with id==____ but that id is already registered

理想情况下，我想在AJAX替换的DOM节点上运行destroyRecursive。我尝试了以下两种方法，但都无效（我认为destroyRecursive适用于小部件而不是DOM节点）：

dojo.byId('main').destroyRecursive();
dijit.byId('main').destroyRecursive();

有没有一个好的方法来做到这一点，或者我需要尽力确保所有的id都是不同的？

- Ashley

Answer 1

你在正确的方向上，而且你说的destroyRecursive只存在于小部件上是正确的。然而，有几种选择可以实现你想要做的事情。

如果你在很大程度上使用小部件，并且该div经常被用作包含小部件和内容的容器，那么我强烈建议您查看dijit.layout.ContentPane。 ContentPane是一个小部件，主要围绕着接收内容（直接或从URL）的容器的概念，其中可能包括小部件。

现在，你可能正在每个页面更改时执行以下操作：

dojo.xhrGet({
    url: 'something.html',
    load: function(html) {
        dojo.byId('main').innerHTML = html;
        dojo.parser.parse(dojo.byId('main'));
    }
    error: function(error) { ... }
});

如果使用 ContentPane，您可以像这样实现相同的功能：

cp.set('href', 'something.html'); //use attr instead of set if < dojo 1.5

使用此方法，ContentPane不仅会获取该URL并保存其内容，还会解析其中的任何小部件 - 同样重要的是，在替换其内容之前，它会自动销毁自身内部存在的任何小部件。

您可以在Dojo文档中了解更多信息：

• http://dojotoolkit.org/reference-guide/dijit/layout/ContentPane.html
• http://dojotoolkit.org/api/dijit/layout/ContentPane

或者，如果您不想使用小部件来保存您的内容，您可以查找

中的小部件并自行销毁它们。以下是最简单的方法：

dojo.forEach(dijit.findWidgets(dojo.byId('main')), function(w) {
    w.destroyRecursive();
});

- Ken Franqueiro

---

AMD笔记： dojo.forEach - 导入"dojo/_base/array"作为array，然后使用array.forEach| dijit.findWidgets - 导入"dijit/registry"，然后使用registry.findWidgets - Deejers

如果您只在HTML模板中定义了contentPane，例如<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'leading'">Leading pane</div>，那么如何从JavaScript访问它呢？基本上，在JavaScript中，我需要destroyRecirsive该面板内的小部件。 - sjs

Answer 2

dojo.query('selector').forEach(function(node){
   dijit.byNode(node).destroyRecursive(true);
});

基本上，选择节点... 您可以使用 dojo.byNode(node) 获取映射为小部件对象，然后使用 destroyRecursive(true); 进行递归销毁。

- dacabdi

Answer 3

我解决了一个类似的问题，只需在使用destroyRecursive(false)清除内容之后，使用dijit.registry.remove('idName')从注册表中删除，然后重新加载即可。

    if(typeof registry.byId("tableOfContents") != "undefined"){
        registry.byId("tableOfContents").destroyRecursive(false);
        dijit.registry.remove('tableOfContents');
    }

- Hil Zapf

Answer 4

如果您需要在页面上销毁多个小部件，以下解决方案适用于我。

var widg = dijit.findWidgets(dojo.byId('root-id')); // root-id is top div id which encloses all widgets
 $(widg).each(function(){

    dijit.byId($(this).attr("id")).destroy(true);

  });

- Venkatesan Natarajan