dojo:通过dom节点销毁所有小部件

Question

我的内容被替换为ajax但有时一个元素在两个页面上具有相同的id(即,主页上的照片在gallery页面上具有相同的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都不同？

Answer 1

你是在正确的轨道上,你是正确的,destroyRecursive只存在于小部件上.但是,有几种选择可以完成您想要做的事情.

如果您在很大程度上使用小部件,并且有问题的div经常被用作存储包含小部件的内容的存储桶,那么我强烈建议您查看dijit.layout.ContentPane.ContentPane是一个小部件,主要关注容器的概念,该容器直接或从URL接收内容,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

或者,如果您不想使用小部件来保存您的内容,您可以在div中查找小部件并自行销毁它们.这是最简单的方法:

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