AS3 Databinding to Specific property at an index in ArrayCollection

Question

I have a situation where I want to use databinding from an ArrayCollection to populate text fields in a Flex view.

The ArrayCollection is populated from an SQL Result object. I store the ArrayColelction in my model class using getters and setters like this:

private var _monthlyData:ArrayCollection;

public function set monthlyData(value:ArrayCollection):void{
_monthlyData = value;
}

[Bindable]
public function get monthlyData():ArrayCollection{
return _monthlyData;
}

I use the monthlyData as a dataprovider for a list etc which works fine. I also need to use properties at certain indexs in this collection as text field strings. When the text field text properties are set I don’t neccesarily have the monthlyData arrayCollection populated yet.

The text fields are set in another outside class with has a singleton reference to this model so I set the fields like so at the moment:

textField.text = _model.monthlyData.getItemAt(3).Month;

I want to setup binding to the array collection instead of just using this assignment method so that when that item in the array is refreshed or the entire arrayCollection is populated or updated , it will update the textField text. I’m having trouble getting the binding to work.

I’m using bindageTools at the moment but have been also using the built in as3 BindingUtils to little effect.

I can do the following which sets the initial text property correctly, but it wont update when the ArrayCollection changes:

Bind.fromProperty(_model.monthlyData.getItemAt(3),"Month").toProperty(textField, "text");

So if someone could please point me in the right direction as to which way is best to get the binding going in pure AS3 no MXML, I’d really appreciate it.

Cheers Marco

Answer 1

From the code you provide, I can see that monthlyData is bindable, which is fine. I'll assume that _model is bindable too.
However the getItemAt() method is not bindable (it will not dispatch propertychange events when items change positions in the collection), hence the text property of the text field will not be updated.

What you can do is something like this:

[Bindable]
public var selectedDate3:MyDate;

<s:TextInput id="myTextInput" text="{selectedDate3.month}" />

or the AS equivalent (why you want to make things hard on yourself is beyond me though)

BindingUtils.bindProperty(myTextInput, "text", selectedDate3, "month");

and then programmatically update selectedDate3:

_model.monthlyData.addEventListener(CollectionEvent.COLLECTION_CHANGE, updateSelected);

private function updateSelected(event:CollectionEvent):void {
    selectedDate3 = _model.monthlyData.getItemAt(3);
}

Note that the month property of MyDate must also be bindable.

---

You mention that these fields are in a VGroup. I'm guessing you want to display a top 3 or something. This is still a list. It would be much easier and cleaner to do this with a List or DataGroup and simply filter the ArrayCollection to only display the first 3 items (or whatever rule for the items to be displayed), or configure the DataGroup to display only three items (it has no scrollbar anyway).