Question

Right now I have an Accordion component in Flex that has two children, I want to give the children a reference to my application model when they have completed their instantiation (after the accordion changes index).

The following notation fails for me because the children are instantiated after the event is triggered (accordionChange method):

<mx:Accordion change="accordionChange(event)" > ...

So what I have currently done is add a creationComplete to each Accordion child which will then assign the model reference:

<?xml version="1.0" encoding="utf-8"?>
<pod:InspectorClass xmlns:pod="pod.*" xmlns:mx="http://www.adobe.com/2006/mxml" >
<mx:Accordion id="accordion" color="0x323232" width="100%" height="100%">
    <mx:VBox label="Card Front" creationComplete="setChildModel()" >
        <pod:FaceInspector id="frontFaceInspector"/>
    </mx:VBox>
    <mx:VBox label="Card Back" creationComplete="setChildModel()" >
        <pod:FaceInspector id="backFaceInspector"/>
...

My “Code behind” class InspectorClass contains a method that looks like this:

    public function setChildModel():void
    {
        if ( accordion.selectedIndex == 0 )
        {
            frontFaceInspector.setModel(model);
        }
        else if ( accordion.selectedIndex == 1 )
        {
            backFaceInspector.setModel(model);
        }
    }

This feels clumsy to me, like I am missing the point of some key part of Flex. I would appreciate any advice as to how I should be doing this, this seems to be a reoccurring pattern for me.

Thanks,

Answer 1

You can just bind the model in each of your FaceInspector instances as you declare them in MXML.

In you FaceInspector Class (AS3/code-behind), make sure your model property is public and bindable.

[Bindable]
public var model:Model;

Then in your Main MXML (or wherever you declare the FaceInspector instances), just bind the model property to the model.

<pod:FaceInspector id="frontFaceInspector" model="{model}" />

I hope this is what you are after.

Also, if your FaceInspector instances only need access to specific properties of your model, then I would suggest making those properties bindable in the Model Class, and bind them directly. E.g.

<pod:FaceInspector id="frontFaceInspector" currentIndex="{model.sceneIndex}" imageURL="{model.image_url}" />