Manipulating DOM of Multiple dijit Widget Instances

Question

I have developed a custom dijit Templated Widget. I have to do some DOM manipulation of the children of the containerNode. Everything works fine, except when I have two of the Widgets loaded, and the manipulation of the children of the containerNode seems to affect all of the Widgets of the same type, not just the particular instance of the widget.

I think I have narrowed it down to this part of my code where I "unload" the "children" I am executing the following function:

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
  }
},

When I seem to execute this, it seems that the child is removed from the DOM of all Widgets. It just doesn't make any sense, and manually inspecting things in Firebug (like dijit.byId("logScroller62").containerNode.children) shows that the browser thinks everything is seperate and I get two different sets of results for two different instances.

Answer 1

I don't really understand your description, but the error seems to be here:

it seems that the child is removed from the DOM of all Widgets

A DOMNode can't be the child of multiple DOMNodes, nor can a widget be the child of multiple widgets at once.

Answer 2

It appears that I had an initialisation/scoping issue. I was keeping my child objects in an array. I had initialised the array in the property definition of my dojo Object Prototype by doing the following:

pages: [],

But it seems that this causes a scoping issue, as simple change to:

pages: null,

And then adding the initialisation to the postCreate function of the Widget like:

this.pages = [];

Seems to have fixed the problem. I am not sure why something like this causes a scoping issue, though.

Answer 3

Bill,

I got the same problem to grip why two separate instances of a tree widget in my page are both manipulated when I mean to create a new Node only on one instance. Tree A is connected to another store via a ForrestTreeModel then Tree B. A class method "createEntry" in a TreeCustom class derived from dijit.Tree is supposed to create Nodes dynamically from some events on Tree A but they are always also populating Tree B. How can I really separate the two instances from each other ?

best Stefan