操作多个 dijit 小部件实例的 DOM答案

【问题标题】：Manipulating DOM of Multiple dijit Widget Instances操作多个 dijit 小部件实例的 DOM
【发布时间】：2010-02-23 11:43:26
【问题描述】：

我开发了一个自定义 dijit 模板小部件。我必须对containerNode 的孩子做一些DOM 操作。一切正常，除非我加载了两个小部件，并且containerNode 的子代的操作似乎会影响相同类型的所有小部件，而不仅仅是小部件的特定实例。

我想我已经把它缩小到我“卸载”我正在执行以下功能的“孩子”的这部分代码：

popPage: function() {
  if (this._pagesLoaded) {
    var i = this._pagesLoaded - 1;
    var y = this.containerNode.children[i];
    if (typeof y !== "undefined") {
      this.containerNode.removeChild(y);
    }
    var page = this.pages.pop();
    page.unsetPage(); //Internal sub object cleanup
    page.destroyRecursive();
    this.endPageLoaded--;
    this._calcPagesLoaded();  //recalcs this._pagesLoaded
  }
},

当我似乎执行此操作时，似乎孩子已从所有小部件的 DOM 中删除。它只是没有任何意义，并且在 Firebug 中手动检查事物（如dijit.byId("logScroller62").containerNode.children）表明浏览器认为一切都是独立的，我得到了两个不同实例的两组不同结果。

【问题讨论】：

标签： javascript dom widget dojo

【解决方案1】：

我不太明白你的描述，但错误似乎在这里：

看来孩子已经从所有Widget的DOM中移除了

一个 DOMNode 不能是多个 DOMNode 的子节点，一个小部件也不能同时是多个小部件的子节点。

【讨论】：

是的，我明白这一点，但似乎正在发生的事情是，我执行上述代码以从 Widget 实例 A 中删除子 DOM 节点，但它从所有子节点中删除了相同的索引Widget 的实例（例如 B、C 等）。
好的，看不到你的代码，但我猜 this.containerNode.children 是一个在多个实例之间共享的数组，因为你在原型中声明了它。
是的，这也是我的猜测...我将返回代码，但我不直接声明它，因为containerNode 是由dijit._Templated HTML 自动设置的模板。我可能以某种方式搞砸了，但我不这么认为。
抱歉，bill，我没有意识到你在评论中准确地告诉我问题出在哪里......为什么在原型中设置一些东西会导致这种情况？
所有实例共享一个原型对象。通常，当您说 myObject.foo = 5 之类的内容时，它会在 myObject 中设置“foo”，从而掩盖该共享原型中 foo 的值……没问题。然而，像 myObject.foo.bar = 5 这样的东西会调整原型中 foo 内 bar 的值。

【解决方案2】：

我似乎遇到了初始化/范围问题。我将我的子对象保存在一个数组中。我通过执行以下操作在我的 dojo 对象原型的属性定义中初始化了数组：

pages: [],

但这似乎会导致范围界定问题，只需更改为：

pages: null,

然后将初始化添加到 Widget 的 postCreate 函数中，如：

this.pages = [];

似乎已经解决了这个问题。不过，我不确定为什么这样的事情会导致范围界定问题。

【讨论】：