Flex: ListItem pulling data from other items in the list?

Question

I have a TileList with a custom ItemRenderer, and each item shows an image which it extgracts from the data it receives from the dataProvider. The wierd thing is, and I have no clue why is some items are show images that are not in their data-bock but in another items data. If I am extracting the image url from its own data I have no clue how it can be getting the image urls from another item. I used a tool tip to show the image url and the item's data and verified that the URL is not in its data.

Here is temp XML I am using:

    <data>

        <bs item_id="1">
            <variation price="300" month="JAN" stone="Garnet" image="<?=$img_dir?>jan.png" style="xsdfcSD" gold_color="Yellow" gold_carat="10"/>
            <variation price="400" month="FEB" stone="Garnet" image="<?=$img_dir?>feb.png" style="xsdfcSD" gold_color="Yellow" gold_carat="10"/>
            <variation price="550" month="MAR" stone="Garnet" image="<?=$img_dir?>march.png" style="xsdfcSD" gold_color="Yellow" gold_carat="10"/>
            <variation price="625" month="APR" stone="Garnet" image="<?=$img_dir?>april.png" style="xsdfcSD" gold_color="Yellow" gold_carat="10"/>
        </bs>

        <bs item_id="2">
            <variation price="300" month="JAN" stone="Garnet" image="<?=$img_dir?>jan.png" style="xsdfcSD" gold_color="Yellow" gold_carat="10"/>
            <variation price="400" month="FEB" stone="Garnet" image="<?=$img_dir?>feb.png" style="xsdfcSD" gold_color="Yellow" gold_carat="10"/>
            <variation price="550" month="MAR" stone="Garnet" image="<?=$img_dir?>march.png" style="xsdfcSD" gold_color="Yellow" gold_carat="10"/>
            <variation price="625" month="APR" stone="Garnet" image="<?=$img_dir?>april.png" style="xsdfcSD" gold_color="Yellow" gold_carat="10"/>
        </bs>

        <bs item_id="3">
            <variation price="300" month="JAN" stone="Garnet" image="<?=$img_dir?>jan.png" style="xsdfcSD" gold_color="Yellow" gold_carat="10"/>
            <variation price="400" month="FEB" stone="Garnet" image="<?=$img_dir?>feb.png" style="xsdfcSD" gold_color="Yellow" gold_carat="10"/>
            <variation price="550" month="MAR" stone="Garnet" image="<?=$img_dir?>march.png" style="xsdfcSD" gold_color="Yellow" gold_carat="10"/>
            <variation price="625" month="APR" stone="Garnet" image="<?=$img_dir?>april.png" style="xsdfcSD" gold_color="Yellow" gold_carat="10"/>
        </bs>

        <bs item_id="4">
            <variation price="300" month="JAN" stone="Garnet" image="<?=$img_dir?>PE105-BT.png" style="xsdfcSD" gold_color="Yellow" gold_carat="10"/>
            <variation price="400" month="FEB" stone="Garnet" image="<?=$img_dir?>PE105-EM.png" style="xsdfcSD" gold_color="Yellow" gold_carat="10"/>
            <variation price="550" month="MAR" stone="Garnet" image="<?=$img_dir?>PE105-OP.png" style="xsdfcSD" gold_color="Yellow" gold_carat="10"/>
            <variation price="625" month="APR" stone="Garnet" image="<?=$img_dir?>PE105.png" style="xsdfcSD" gold_color="Yellow" gold_carat="10"/>
        </bs>


</data>

Each item gets a < bs > block. (4 items)

And here is the code from the ItemRender:

<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="150" height="150" xmlns:local="*">

    <mx:Script>
     <![CDATA[
      import mx.controls.Alert;

      private var _randomIndex:uint;
      private var _indexSet:Boolean;

      private function getRandomImage ():String
      {
       if (!_indexSet)
       {
        var maxIndex:uint = data.children().length();
        _randomIndex = Math.floor(Math.random()*maxIndex);
        _indexSet = true;
       }
       return data.children()[_randomIndex].@image;
      }

     ]]>
    </mx:Script>


    <local:LoadingImage id="tn" toolTip="{tn.source+'\n\n'+data}" source="{getRandomImage()}" width="150" height="150"/>

</mx:Canvas>

The 2nd and 3rd are showing images that are only in the 4th block.

Does anyone see something I am not seeing?

Thanks!

Answer 1

Itemrenderers are recycled, so if you do any processing in set data() you should always have matching if / else statements. You cannot assume that the member variables in the itemrender are in a "known" state. In your code, it looks like indexSet is not being initialized properly + there is no else in the if statement.

Answer 2

When does getRandomImage get called? ItemRenderer's are reused so they may have an old image attached to it. If you don't reload it with a new value, it will still have the same image. Maybe you could try overloading the dataChanged event? I also noticed your _indexSet is probably not working the way you want as stated above, but that shouldn't be your main problem.

Answer 3

I found that if I pass the "data" to the function like this getRandomImage(data) it solves the issue. Not 100% sure why though.