Changing a child component in another component in a repeater

I have a custom component in a repeater. This component has a child component which can be of two types depending on some conditions. What I did was use an UIComponent as a place holder.

In the repeated component, lets say RepeatedComponent :

<mx:VBox>
   <mx:UIComponent id="placeHolder"/>
</mx:VBox>

And I'm doing this in the component having the repeater :

// Function where I try to inject the child component :
private function getComponent():UIComponent{
            if(condition)
            {
                return new ChildComponentA(); 
            }
            else
            {
                return new ChildComponentB();
            }


    ]]>
</mx:Script>
<mx:VBox>

    <mx:Repeater id="repeteur" 
                 recycleChildren="true" 
                 dataProvider="{arrayBeneficiaires}" >

        <components:RepeatedComponent id="re开发者_运维技巧peatedComponent"
                                      beneficiaire="{repeteur.currentItem}"
                                      placeHolder="{getComponent()}"/>

    </mx:Repeater>
</mx:VBox>

When I place breakpoints in the functions called at creationComplete, I can see that the component assigned to placeHolder is correct but it does not show on my display. I tried refreshing by calling invalidateDisplayList in every place I can think of but it does not seem to work. Any ideas would be most welcome.

Thanks

I suspect the issue is that the value from getComponent() is never added to the stage. ie - setting the value of placeHolder to something is not the same as calling addChild(getComponent()).

Therefore, the following would work:

 <mx:Repeater id="repeteur" 
             recycleChildren="true" 
             dataProvider="{arrayBeneficiaires}" >

    <components:RepeatedComponent id="repeatedComponent"
                                  beneficiaire="{repeteur.currentItem}"
                                  creationComplete="getComponent(repeatedComponent)"/>

</mx:Repeater>




 private function getComponent(parent:RepeatedComponent):void {
        if(condition)
        {
            parent.addChild(new ComponentA());
        }
        else
        {
            parent.addChild(new ComponentB()); 
       }
  }

Note, that in this scenario, you don't need the placeHolder UIComponent (which doesn't really serve any purpose).

However, I'd reccommend that this logic be moved inside RepeatedComponent, as it appears as though this decision is the responsibility of the component, rather than the parent.

Then the code becomes much cleaner:

 <mx:Repeater id="repeteur" 
             recycleChildren="true" 
             dataProvider="{arrayBeneficiaires}" >

    <components:RepeatedComponent id="repeatedComponent"
                                  beneficiaire="{repeteur.currentItem}" />

</mx:Repeater>


<!-- RepeatedComponent.mxml -->
<mx:VBox>
   <mx:UIComponent id="placeHolder"/>
</mx:VBox>

<mx:Script>
     private var _beneficiaire:Object
     public function get beneficiaire():Object {
         return _beneficiaire;
     }
     public function set beneficiaire(value:Object):void {
          _beneficiaire = value;
          createSubComponent();
     }
     private function createSubComponent():void
        if(condition)
        {
            parent.addChild(new ComponentA());
        }
        else
        {
            parent.addChild(new ComponentB()); 
        }
    }

</mx:Script>