Flex, Array, ArrayCollection

I was working on some Flex stuff this morning, and got hung up on a data binding problem. 

Data binding is one of Flex's strongest features.  It lets you simply say "this value is bound to that", so you can do something like have a label's text be bound to a field in your data model, so that if the model changes, the view is updated automatically.

Here's what I had done:

// ActionScript code
class MyFoo
{
  var myItems:Array = new Array();
}

<!-- MXML -->
<mx:List dataProvider="{myFooInstance.myItems}"/>

I tried binding to both a ComboBox and a List.  When I bound to the ComboBox, I could see the items in the myItems array when I dropped down the combo box, but they never showed up in the list.

Turns out the problem is that when you bind to an Array, you're binding to the array field itself, not to the items in the array.  If I'd created a new array and assigned it to myItems then the List would have populated, but because I was just adding items to the myItems array, they never showed up.

The solution is simple:  Use an ArrayCollection instead of an Array.  ArrayCollection is designed to be bound to.