Flex: Bindable object passed to component null reference

Flex: Bindable object passed to component null reference

I am trying to pass an object (a class that has a constructor that
initializes the values) from the main application to a custom component.
However, in the custom component I get a null reference exception even
though I use it on creation complete event.
This only happens when I try to use it in a function of the custom
component and it works if I set the property in the mxml tag.
//LeftAligned.mxml
<?xml version="1.0" encoding="utf-8"?>
<s:SkinnableContainer xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
width="0" height="0"
creationComplete="creationCompleteHandler(event)">
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects)
here -->
</fx:Declarations>
<fx:Script>
<![CDATA[
import classes.CardDetails;
import mx.collections.ArrayCollection;
import mx.controls.Alert;
import mx.events.FlexEvent;
import mx.events.FlexMouseEvent;
[Bindable]
public var cardDetails:CardDetails;
protected function creationCompleteHandler(event:FlexEvent):void
{
drawFields();
}
protected function drawFields():void {
//null reference
Alert.show("Length: " + cardDetails.detailList.length);
}
]]>
</fx:Script>
<s:TextInput id="title" width="250"
x="91" y="143"
styleName="cardTextInput"
text="{cardDetails.title}"/>
</s:SkinnableContainer>
The object is passed to the custom component in App.mxml
//App.mxml
<standard:LeftAligned cardDetails="{cardDetails}"/>
What am I missing and what can I do to be able to access the object in the
custom component?