Question

I use a spark List with a custom item renderer and an ArrayCollection for dataProvider.

The ItemRenderer looks something like

<mx:TextInput id="txtValue1" text="{data.myFirstValue}"/>
<mx:TextInput id="txtValue2" text="{data.mySecondValue}"/>

However, even though I change the text in txtValue1 or txtValue2, those are not actually changed in the object inside the ArrayCollection.

myFirstValue and mySecondValue are decorated with the [Bindable] tag.

My understanding is that if the text property is set to be bound a certain property, the changes should be automatically applied.

So the HACK (or so I think) that I use is to listen to the focusOut event of each textbox, and access the parent data provider and set the the values manually.

What am I doing wrong? Is it supposed to work like this?

Or what did I understand wrong?

Answer 1

By default, binding in flex is one-way. In other words, changes in your data object are updated in the UI but not the other way around.

You need to use 2-way binding. This is very easy since Flex 4.0. Notice the use of the “@” sign:

<mx:TextInput id="txtValue1" text="@{data.myFirstValue}"/>
<mx:TextInput id="txtValue2" text="@{data.mySecondValue}"/>

Now, any changes made to the TextInput will get pushed down to the data object as well.

Read more about Two way data binding.