Detailed description of Flex Data Binding

When Data BindIng occurs:

1. occurs when the value of the bound source value changes.
2. The binding takes place once when the binding source sends an initialize event.

Enable attributes to be bound:

Generally, you only need to add
[Bindable] or
[Bindable (event = "eventname")]
Metadata
Note:
If the events that trigger the binding are not marked, like [Bindable], Flex will automatically add the propertyChange event to the binding. When the source data changes, Flex will automatically dispatch the event to trigger the data binding. If the modified data and source data are equal to or equal to "=", Flex will not trigger data binding.
If the marked event triggers binding, as in [Bindable (event = "eventname")], you must dispatch the event to trigger data binding when the source data changes. No matter whether the modified data and source data are full or not, Flex will trigger data binding and require self-programming control, for example:
<Mx: Script>
<! [CDATA [
[Bindable (event = "hhhh")]
Private var ss: String = "aaa ";

Private function doTest (): void
{
Ss = "bbb ";
If (ss! = "Aaa") // determines whether the source data is equal. Otherwise, the binding is triggered.
This. dispatchEvent (new Event ("hhhh "));
}
]>
</Mx: Script>
<Mx: Text text = "{ss}"/>
<Mx: Button click = "doTest ()"/>
If you do not have this. dispatchEvent (new Event ("hhhh"), it does not work if you click the button. In addition, when declaring a Custom trigger event, ChangeWatcher is used to monitor its changes. Although the target source value has changed, ChangeWatcher cannot monitor the changes, similarly, ChangeWatcher cannot monitor non-common variables. The following describes ChangeWatcher.
Bind function -- Functions, Object -- Object, array -- Arrays
Function:
You can use functions directly in. Example: <mx: Text text = "{Matn. random () * ss}"/>
There is nothing to mention above. It is important to bind a function below:
<Mx: Script>
<! [CDATA [
Public var ss: String = "aaa ";

[Bindable (event = "hhhh")]
Private function gg (): String
{
Return ss;
}

Private function doTest (): void
{
Ss = Math. random (). toString ();
This. dispatchEvent (new Event ("hhhh "));
}
]>
</Mx: Script>

<Mx: Text text = "{gg ()}"/>
<Mx: Button click = "doTest ()"/>
In this way, you can add a [bindable] to the function to bind the function. However, if you do not declare a Custom trigger event, you can only bind it once during component initialization, clicking the above button does not work. You can try it on your own.

There are also getter and setter functions. It is important to add [bindable] To the getter or setter functions. You don't need to add either of them. Just add one. For example:
<Mx: Script>
<! [CDATA [
Public var ss: String = "aaa ";

[Bindable]
Public function get gg (): String
{
Return ss;
}

Public function set gg (value: String): void
{
Ss = value;
}

Private function doTest (): void
{
Gg = Math. random (). toString ();
This. dispatchEvent (new Event ("hhhh "));
}
]>
</Mx: Script>

<Mx: Text text = "{gg}"/>
<Mx: Button click = "doTest ()"/>
The binding effect can also be achieved. If there is only one getter method, you need to declare a Custom trigger event to bind data. You can try it by yourself.
Object:
The most important thing about object binding is to figure out how to declare so that its attributes can be bound. For example:
Declarative object NonBindableObject
// [Bindable] Comment out this line first to test
Public class NonBindableObject extends Object
{

Public function NonBindableObject (){
Super ();
}

Public var stringProp: String = "String property ";

Public var intProp: int = 52;
}
Bind
<Mx: Script>
<! [CDATA [
[Bindable]
Public var myObj: NonBindableObject = new NonBindableObject ();
[Bindable]
Public var anotherObj: NonBindableObject =
New NonBindableObject ();
Public function initObj (): void {
AnotherObj. stringProp = 'anotherobject ';
AnotherObj. intProp = 8;
}
]>
</Mx: Script>
<Mx: Text id = "text1" text = "{myObj. stringProp}"/>
<Mx: Text id = "text2" text = "{myObj. intProp}"/>
<Mx: Button label = "Change myObj. stringProp"
Click = "myObj. stringProp = 'new string';"/>

<Mx: Button label = "Change myObj. intProp"
Click = "myObj. intProp = 10;"/>

<Mx: Button label = "Change myObj"
Click = "myObj = anotherObj;"/>
If the [bindable] label is not added before the class when declaring an object, all attributes of the object cannot be bound. That is to say, when the object property changes, binding is not triggered, therefore, it is useless to click the first two buttons. The binding can be triggered only when the object itself changes, just as the operation of the third button.
Now, cancel the comment on the first line so that the object property can be bound. Click the first two buttons to try again. If you add a [Bindable] meta tag to an object, all the public attributes of the object-public and the attributes with the getter and setter methods will be bound.
Array:
If the array is used as the binding object, it is best to use the ArrayCollection object, because when using some APIs of the ArrayCollection object to operate the array, data binding is triggered, for example, ArrayCollection. addItem (), ArrayCollection. addItemAt (), ArrayCollection. removeItem (), and ArrayCollection. removeItemAt () method. Otherwise, data binding is triggered only when the Array itself changes. Data Binding is not triggered when an attribute in the Array changes. For example:
<Mx: Script>
<! [CDATA [
Import mx. collections. ArrayCollection;
[Bindable]
Public var myAC: Array = ["One", "Two", "Three", "Four"];

[Bindable]
Public var myAC2: Array = ["One1", "Two1", "Three1", "Four1"];
]>
</Mx: Script>
<Mx: Text id = "text1" text = "{myAC [0]}"/>
<Mx: Text id = "text2" text = "{myAC. getItemAt (0)}"/>
<Mx: Button id = "button1"
Label = "changing a property"
Click = "myAC [0] = 'new one'"/>
<Mx: Button id = "button2"
Label = "Change object"
Click = "myAC = myAC2"/>
When using the [] format to declare an array, you must use the ArrayCollection API method to bind data. Therefore, when you click the first button, text2 changes, but text1 does not.
In addition to using the [Bindable] label to declare data Binding, you can also use the <mx: Binding/> component and ActionScript.
Use <mx: Binding/>, for example:
<Mx: binding source = "text1.text" destination = "text2.text"/>
<Mx: binging source = "text2.text" destination = "text1.text"/>
<Mx: TextInput id = "text1"/>
<Mx: TextInput id = "text2"/>
Source is the binding source, and destination is the target source. According to the above statement, changes in both text1 and text2 will cause changes to the other party. If you are careful, may you think this will not cause an endless loop? The answer is no and will not lead to an endless loop. I think it should be that the internal Flex mechanism has been optimized to trigger this situation only once.
Bind the file by using the following code:
1. Use bindProperty ().
BindProperty (site: Object, prop: String, host: Object, chain: Object, commitOnly: Boolean = false): ChangeWatcher, for example:
Var YY: ChangeWatcher = BindingUtils. bindProperty (text2, "text", text1, "text ");
That is, when the value of text1 changes, text2 also changes. site is the destination object, prop is the destination attribute, and host is the bound source, china is bound to the source property chain. Next, commitOnly is set to False by default. That is, whether an event is confirmed or an unconfirmed event, binding is triggered. If it is set to True, binding can be triggered only when an event is confirmed. This is generally unavailable and is related to the Flex event mechanism. If it is false, two binding events will be triggered when data changes, if it is True, it is triggered only once. You can use the bindSetter method for testing. If you do not want to bind the EIP, You can unbind the EIP by using the method.

2. Use bindSetter ().
BindSetter (setter: Function, host: Object, chain: Object, commitOnly: Boolean = false): ChangeWatcher, for example:
Var YY: ChangeWatcher = BindingUtils. bindSetter (change, text1, "text", true );
Private function change (str: String): void
{
Text2.text = str;
}
Change is the function triggered when the binding source changes. Other parameters are the same.
3. Use ChangeWatcher. watch ().
The ChangeWatcher. watch method can also be used to monitor the changes of object attributes, which is very useful.
Watch (host: Object, chain: Object, handler: Function, commitOnly: Boolean = false): ChangeWatcher, for example:
Var YY: ChangeWatcher = ChangeWatcher. watch (text1, "text", change );
Private function change (e: Event): void
{
Text2.text = text1.text;
}
The Event here is related to the trigger Event defined by the bound data. You can use the parent Event of all events for representation.

Note:
As mainly implements data binding through the mx. binding. utils. BindingUtils class. The following differences exist between MXML and as for data binding:
1. when using AS for data binding, the AS Code cannot be used in the bindProperty () or bindSetter () methods. This is different from MXML and bindSetter () can be used () method to declare a binding handler.
2. When using AS for data binding, you cannot use the EX4 syntax, that is, you cannot directly use the XML parsing syntax.
3. When using AS for data binding, no function or array can be used in the attribute chain.
4. MXML provides better error prompt and warning functions.
Finally, let's talk about the attribute chain.
Attribute chains are the objects represented by chain parameters in bindProperty () and bindSettet () methods. Sometimes the binding source is not just a simple form like text1.text, but also similar to user. name. text1.text, there is a relation chain problem. If one of the links changes, will it trigger binding? The answer is that if you want to change one of these items to trigger data binding, each element of the chain must be unbound. For the above form, you can use the bindProperty method as follows:
BindProperty (text2, "text", this, ["user", "name", "text1", "text"]).