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

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.