How to trigger itemRendererFunction to be called again when data change in Flex

Question

I have a list that uses a itemRendererFunction to get custom item renderers. Is there a way to only reevaluate one item in the list and get different item renderer?

imagine code like this :

there are two item renderers ItemRendererOne.mxml and ItemRendererTwo.mxml

Data.as

package {

    public class Data {

        private var _data : Boolean = false;

        [Bindable]
        public function get data():Boolean {
            return _data;
        }

        public function set data(value:Boolean) : void {
            _data = value;
        }

        public function Data(value : Boolean) {
            _data = value;
        }
    }
}

and main app is

<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009" 
                       xmlns:s="library://ns.adobe.com/flex/spark" 
                       xmlns:mx="library://ns.adobe.com/flex/mx" >
    <fx:Script>
        <![CDATA[
            import mx.collections.ArrayList;

            private var dataProvider : ArrayList = new ArrayList([new Data(true), new Data(false)]); 

            public function getItemRenderer(data : Object) : IFactory {
                if (data.data) {
                    return new ClassFactory(ItemRendererOne);
                } else {
                    return new ClassFactory(ItemRendererTwo);
                }
            }

            protected function button1_clickHandler(event : MouseEvent) : void {
                var data : Data = dataProvider.getItemAt(0) as Data;
                data.data = !data.data;
            }

        ]]>
    </fx:Script>

    <s:VGroup>
        <s:List dataProvider="{dataProvider}" itemRendererFunction="{getItemRenderer}" />

        <s:Button click="button1_clickHandler(event)" />
    </s:VGroup>

</s:WindowedApplication>

Basically when someone clicks on the button, I want getItemRenderer to be called again and the item in the list is updated with new item renderer.

Answer 1

Not sure about flex 4 as i mostly work in flex 3 but the set up should be close.
Basically, let the render handle the rendering.

Your list should look something like this.

There are 3 very important overrides you can do that will control the way a renderer can react to data.
1) set data is for when new data is assigned
2) createChildren will allow you to dynamically create children. I believe this is the function you are looking for in conjunction with set data
3) commitProperties this is where you do you assigning data to the children that are hard coded like my label example or the dynamically created children.

What I have done in the past is similar.
I test the data agains the current layout if it isn't the correct layout I rebuild it.
So in set data method I test if layout is wrong I call createChildren().
I suppose you could test the data structure on the old data before calling super.data in set data, but I didn't have good results like that.

myRenderer.mxml

<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" >
    <mx:Script>
      <![CDATA[
        override public function set data(val:Object):void{
          super.data = val;
          if( !val ){
            return;
          }
          // test data here if current layout is wrong rebuild it by calling createchildren
        }
        override protected function createChildren():void{
          super.createChildren()
          if( this.data == null ){
            return;
          }
          // create your data driven layout here
        }   
        override protected function commitProperties():void{
          super.commitProperties();
          if ( data == null ){
            return;
          }
        }

       ]]>
    </mx:Script>
    <mx:Label id="myLabel" text="{data.someLabelVar} />
</mx:VBox>