Question

I’m writing a widget which takes all child <img> tags, grabs the src attribute, and should create a unordered list with the child list elements having the background be the aforementioned sources. However, when I create the list elements and tell dojo to place them inside the master <ul>, they end up outside. This widget is the 3rd in the chain, as represented here:

+ ImageBox
    ++ AnimImageBox
    ++ SlideImageBox
         +++ AnimSlideImageBox (TBA)

Master List Creation:

buildRendering : function(){
    this.inherited(arguments);

    // Create the slidebox <ul>
    this.slideHolder = domConstruct.create('ul', {
        className : 'imagebox-slide'
    }, this.domNode, 'first');
}

This is the block from the _lazyLoad method. It’s originally defined in the root ImageBox class, and overridden here, called inside postCreate():

var self = this;
query('img', this.domNode).forEach(function(image){
    // With each found image, push the src attribute into our class-wide array
    var src = domAttr.get(image, 'src');
    self.images.push(src);

    // Create an <li> for the slide block
    var li = domConstruct.create('li', {
        className : 'slide'
    }, self.slideHolder);

    // Destroy the <img /> element
    domConstruct.destroy(image);
});

Overview of class structure/method calls:

ImageBox.js

buildRendering():
    - Creates the preloader
postCreate(): 
    + Calls _lazyLoad to extract image data, load, show progress, etc.

SlideImageBox.js (the one I’m having issues with)

buildRendering():
    - Calls the superclass method, and then creates the <ul> element, placing to this.domNode
postCreate():
    - Just calls the superclass postCreate() method (via this.inherited(args))
_lazyLoad():
    - Overridden completely, is called correctly as tested with various log() calls.

Expected Result

<ul class="imagebox-slide">
    <li class="slide"><!--Content --></li>
    <li class="slide"><!--Content --></li>
    <li class="slide"><!--Content --></li>
</ul>

Results

<ul class="imagebox-slide"></ul>
<li class="slide"><!--Content --></li>
<li class="slide"><!--Content --></li>
<li class="slide"><!--Content --></li>

At every step I can log() the nodes, so I know they exist, but the domConstruct.create() line just isn’t putting them into the node. I’ve dealt with dojo like this more than once, so maybe it has something to do with my inheritance somewhere?

Maybe it’s late and need a fresh pair of eyes, or is something else at work here?

Edit

@DavidMcMullin, the place call I was having issues with is implicitly called in create, sorry I didn’t emphasize that point.

@Frode, It requires inheritance from 2 other .js files, I haven’t used the fiddler enough to know how to set that up, I’ll look into it though.

@Stephen, that was it, turns out, somehow, the creation order was off, even though the log() statements were telling me it wasn’t, and I thought I had tried that… I’ll have to refactor a bit to accommodate methods called in the superclass but just glad it’s working now. Put an answer and I’ll accept.

Answer 1

Can’t see anything that is obviously wrong with this code. I think it ought to work. It could be something to do with the placement order of the various nodes.

Have you tried running the buildRendering code in the postCreate instead? It looks like the <ul> element is being created after the <li>’s have been placed (just a guess) – try changing the placement parameter ‘first’ with ‘last’ to see if it then appears after the <li>’s, if it does then it is being run after the <li>’s are created (just a hunch, stabbing in the dark as it all looks fine to me).

If this works then it might be worth having a look the position of this.inherited(arguments); within the methods. Maybe try moving it to the end of buildRendering (after the code to create the <ul>).