Post navigation

Flex 4 bidirectional data binding: chicken or egg?

One of the many new features in Flex 4 is bidirectional data binding. I think it’s a useful addition because many times you have a data model that you bind to a form, and you want any changes in the form to be reflected back into the data model. With bidirectional data binding you can do this on the same line that you defined the binding, so there is no need of additional code (as was the case in Flex 3).

Here are the two syntaxes for declaring the binding as bidirectional:

<s:TextInput id=”txt” text=”@{value}”/> – notice the addition of “@”, this is the operator used to mark the binding as bidirectional

We have a String variable with the default value “Hello World!”, and this variable is the source of data binding for the TextInput text variable. You might think that the execution of init() function will output:

1: Hello World!

2: Hello World!

Actually, the output is nothing! When I run this code for the first time I was puzzled. I then used the debugger to see what it was happening behind the curtains.

This is what I found:

The application starts to initialize

First the labelValue variable is initialized and triggers the property watcher (because it is used in binding)

But at this point, the TextInput field is null, and the binding cannot be completed

Next, the initialization of TextInput starts

By default, the text property of this field is an empty string “”

Because the TextInput is part of data binding too (remember the data binding is bidirectional in my code), the property watcher executes and sets the value of labelValue to empty string

Finally, the application finishes its creation and the init() function is executed. By now, both the variable and the text property of the TextInput have the same value, empty string

Elementary my dear Watson!

If I want the code to work as I intended, I have to initialize the labelValue variable on the creationComplete event or after:

1:privatefunction init():void {

2: labelValue = "Hello Wold!";

3: }

I guess this is one of those problems: who was first, the chicken or the egg?