When does Data BindIng happen:
1. Occurs when the value of the binding source property changes.
2. The binding occurs once when the binding source issues an initialize event.
Make attributes have binding functionality:
Generally, just add the attribute before it
[Bindable] or
[Bindable(event="eventname")]
Meta tag
Notice:
If the event that triggers the binding is not marked, as [Bindable], Flex will automatically add a 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 inconsistent, then Flex will not trigger data binding.
If the event that triggers the binding is marked, as [Bindable(event="eventname")], then when the source data changes, the event must be dispatched to trigger the data binding. Regardless of whether the modified data and source data are intact, Flex will trigger data binding and need to be programmed and controlled by itself, for example:
<mx:Script>
<![CDATA[
[Bindable(event="hhhh")]
private var ss:String="aaa";
private function doTest():void
{
ss="bbb";
if(ss!=="aaa") / /Judge whether the source data is equal. If it is not equal, the binding will be triggered
(new Event("hhhh"));
}
]]>
</mx:Script>
<mx:Text text="{ss}"/>
<mx:Button click="doTest()"/>
If there is no such sentence (new Event("hhhh")), then if you click the button, is it not useful? In addition, when declaring a custom trigger event, use ChangeWatcher to monitor its changes. It is found that although the destination source value has changed, ChangeWatcher cannot monitor changes, and ChangeWatcher cannot monitor changes in non-common variables. Regarding ChangeWatcher, it will be mentioned below.
Binding functions—Functions, Objects—Objects, Arrays
function:
You can use functions directly in {}. For example: <mx:Text text="{()*ss}"/>
There is nothing to talk about above, the following is more important about function binding:
<mx:Script>
<![CDATA[
public var ss:String="aaa";
[Bindable(event="hhhh")]
private function gg():String
{
return ss;
}
private function doTest():void
{
ss=().toString();
(new Event("hhhh"));
}
]]>
</mx:Script>
<mx:Text text="{gg()}"/>
<mx:Button click="doTest()"/>
This adds a [bindable] to the function, so that the function has a binding function. However, if you do not declare a custom trigger event, you can only bind once when the component is initialized. Clicking the above button is of no use. You can try it yourself.
There are also getter and setter functions, which are more important. Add [bindable] to getter or setter functions. You don’t need to add both, 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=().toString();
(new Event("hhhh"));
}
]]>
</mx:Script>
<mx:Text text="{gg}"/>
<mx:Button click="doTest()"/>
It can also achieve the binding effect. If there is only one getter method, then to implement data binding, you need to declare a custom trigger event. You can try it yourself.
Object:
The most important thing about object binding is to figure out how to declare it so that its properties have binding functions, such as:
Declare object Non BindableObject
//[bindable] Comment out this line first and test it
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 {
= 'anotherObject';
= 8;
}
]]>
</mx:Script>
<mx:Text text="{}"/>
<mx:Text text="{}"/>
<mx:Button label="Change"
click=" = 'new string';"/>
<mx:Button label="Change"
click=" = 10;"/>
<mx:Button label="Change myObj"
click="myObj = anotherObj;"/>
If the [bindable] tag is not added before the class when declaring the object, then all properties of the object cannot be bound, that is, when the object properties change, the binding will not be triggered, so clicking the first two buttons is useless. Only when the object itself changes can the binding be triggered, just like the operation of the third button.
Now uncomment the first line so that the object properties can be bound, then click the first two buttons to try. Just add the [Bindable] meta tag to the object, then all public properties of the object - public and properties with getter and setter methods will have binding functions.
Array:
If you use an array as a binding object, it is best to use the ArrayCollection object, because data binding will be triggered when using some APIs of the ArrayCollection object to operate the array, such as: (), (), (), and () methods. Otherwise, if you want to use Array directly, data binding will only be triggered when Array itself changes. Data binding will not be triggered when a certain attribute in the array changes. For example:
<mx:Script>
<![CDATA[
import ;
[Bindable]
public var myAC:Array =["One", "Two", "Three", "Four"];
[Bindable]
public var myAC2:Array =["One1", "Two1", "Three1", "Four1"];
]]>
</mx:Script>
<mx:Text text="{myAC[0]}"/>
<mx:Text text="{(0)}"/>
<mx:Button
label="change a certain attribute"
click="myAC[0]='new One'"/>
<mx:Button
label="change object"
click="myAC=myAC2"/>
When declaring an array using the [] form, you must use the ArrayCollection API method to implement data binding, so when you click the first button, text2 changes, but text1 does not.
In addition to using the [Bindable] tag to declare data binding, it can also be implemented using <mx:Binding/> components and ActionScript.
Use <mx:Binding/>, for example:
<mx:binding source="" destination=""/>
<mx:binging source="" destination=""/>
<mx:TextInput />
<mx:TextInput />
source is the binding source and destination is the destination source. According to the above writing method, whether text1 or text2 changes, it will cause changes to the other party. Careful, you might think that this will not cause a vicious cycle? If the answer is no, it will not cause a dead cycle. I think it should be that the internal mechanism of Flex has optimized this situation and made it trigger only once.
Use ActionScript to bind:
1. Use bindProperty().
bindProperty(site:Object, prop:String,host:Object, chain:Object,commitOnly:Boolean = false):ChangeWatcher, for example:
var myc:ChangeWatcher=(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, host is the binding source, and china is the binding source attribute chain - About the attribute chain, commitOnly defaults to False, that is, whether it is a confirmed event or an unconfirmed event, the binding will be triggered. When True, only a confirmation event can trigger the binding. This is generally not available, and it is related to Flex's own event mechanism. If it is false, two binding events will be triggered when the data is changed. When it is True, it will only trigger once. You can use the bindSetter method to test it. When you don't want to bind, you can use the () method to unbind.
2. Use bindSetter().
bindSetter(setter:Function, host:Object, chain:Object, commitOnly:Boolean = false):ChangeWatcher, for example:
var myc:ChangeWatcher=(change,text1,"text",true);
private function change(str:String):void
{
=str;
}
Change is the function triggered when the binding source changes, and the other parameters are the same.
3. Use ().
It is also very useful to use methods to monitor the changes in object properties.
watch(host:Object, chain:Object, handler:Function,commitOnly:Boolean = false):ChangeWatcher, for example:
var myc:ChangeWatcher=(text1,"text",change)；
private function change(e:Event):void
{
=;
}
The Event here is related to the trigger event defined by the binding data, and you can use the parent class Event of all events to represent.
Notice:
As mainly implements data binding through this class. There are the following differences in using MXML and as:
1. When using AS for data binding, AS code cannot be used in bindProperty() or bindSetter() methods. This is different from MXML. You can use bindSetter() method to declare a binding processing function.
2. When using AS for data binding, EX4 syntax cannot be used, which means that XML parsing syntax cannot be used directly.
3. When using AS for data binding, no functions and arrays can be used in the attribute chain.
It has better error prompts and warning functions.
Finally, let’s talk about attribute chains.
The property chain is the object represented by the chain parameters in methods such as bindProperty() and bindSettet(). Sometimes the binding source may not be just such a simple form, but can also be similar to. Then there is a problem with a relationship chain. If a certain item in this chain is changed, will the binding be triggered? The answer is that if you want it to change one of these to trigger data binding, then each element of the chain must be boundable. For the above form, you can use the bindProperty method like this:
bindProperty(text2, "text", this, ["user", "name","text1","text"])。
1. Occurs when the value of the binding source property changes.
2. The binding occurs once when the binding source issues an initialize event.
Make attributes have binding functionality:
Generally, just add the attribute before it
[Bindable] or
[Bindable(event="eventname")]
Meta tag
Notice:
If the event that triggers the binding is not marked, as [Bindable], Flex will automatically add a 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 inconsistent, then Flex will not trigger data binding.
If the event that triggers the binding is marked, as [Bindable(event="eventname")], then when the source data changes, the event must be dispatched to trigger the data binding. Regardless of whether the modified data and source data are intact, Flex will trigger data binding and need to be programmed and controlled by itself, for example:
<mx:Script>
<![CDATA[
[Bindable(event="hhhh")]
private var ss:String="aaa";
private function doTest():void
{
ss="bbb";
if(ss!=="aaa") / /Judge whether the source data is equal. If it is not equal, the binding will be triggered
(new Event("hhhh"));
}
]]>
</mx:Script>
<mx:Text text="{ss}"/>
<mx:Button click="doTest()"/>
If there is no such sentence (new Event("hhhh")), then if you click the button, is it not useful? In addition, when declaring a custom trigger event, use ChangeWatcher to monitor its changes. It is found that although the destination source value has changed, ChangeWatcher cannot monitor changes, and ChangeWatcher cannot monitor changes in non-common variables. Regarding ChangeWatcher, it will be mentioned below.
Binding functions—Functions, Objects—Objects, Arrays
function:
You can use functions directly in {}. For example: <mx:Text text="{()*ss}"/>
There is nothing to talk about above, the following is more important about function binding:
<mx:Script>
<![CDATA[
public var ss:String="aaa";
[Bindable(event="hhhh")]
private function gg():String
{
return ss;
}
private function doTest():void
{
ss=().toString();
(new Event("hhhh"));
}
]]>
</mx:Script>
<mx:Text text="{gg()}"/>
<mx:Button click="doTest()"/>
This adds a [bindable] to the function, so that the function has a binding function. However, if you do not declare a custom trigger event, you can only bind once when the component is initialized. Clicking the above button is of no use. You can try it yourself.
There are also getter and setter functions, which are more important. Add [bindable] to getter or setter functions. You don’t need to add both, 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=().toString();
(new Event("hhhh"));
}
]]>
</mx:Script>
<mx:Text text="{gg}"/>
<mx:Button click="doTest()"/>
It can also achieve the binding effect. If there is only one getter method, then to implement data binding, you need to declare a custom trigger event. You can try it yourself.
Object:
The most important thing about object binding is to figure out how to declare it so that its properties have binding functions, such as:
Declare object Non BindableObject
//[bindable] Comment out this line first and test it
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 {
= 'anotherObject';
= 8;
}
]]>
</mx:Script>
<mx:Text text="{}"/>
<mx:Text text="{}"/>
<mx:Button label="Change"
click=" = 'new string';"/>
<mx:Button label="Change"
click=" = 10;"/>
<mx:Button label="Change myObj"
click="myObj = anotherObj;"/>
If the [bindable] tag is not added before the class when declaring the object, then all properties of the object cannot be bound, that is, when the object properties change, the binding will not be triggered, so clicking the first two buttons is useless. Only when the object itself changes can the binding be triggered, just like the operation of the third button.
Now uncomment the first line so that the object properties can be bound, then click the first two buttons to try. Just add the [Bindable] meta tag to the object, then all public properties of the object - public and properties with getter and setter methods will have binding functions.
Array:
If you use an array as a binding object, it is best to use the ArrayCollection object, because data binding will be triggered when using some APIs of the ArrayCollection object to operate the array, such as: (), (), (), and () methods. Otherwise, if you want to use Array directly, data binding will only be triggered when Array itself changes. Data binding will not be triggered when a certain attribute in the array changes. For example:
<mx:Script>
<![CDATA[
import ;
[Bindable]
public var myAC:Array =["One", "Two", "Three", "Four"];
[Bindable]
public var myAC2:Array =["One1", "Two1", "Three1", "Four1"];
]]>
</mx:Script>
<mx:Text text="{myAC[0]}"/>
<mx:Text text="{(0)}"/>
<mx:Button
label="change a certain attribute"
click="myAC[0]='new One'"/>
<mx:Button
label="change object"
click="myAC=myAC2"/>
When declaring an array using the [] form, you must use the ArrayCollection API method to implement data binding, so when you click the first button, text2 changes, but text1 does not.
In addition to using the [Bindable] tag to declare data binding, it can also be implemented using <mx:Binding/> components and ActionScript.
Use <mx:Binding/>, for example:
<mx:binding source="" destination=""/>
<mx:binging source="" destination=""/>
<mx:TextInput />
<mx:TextInput />
source is the binding source and destination is the destination source. According to the above writing method, whether text1 or text2 changes, it will cause changes to the other party. Careful, you might think that this will not cause a vicious cycle? If the answer is no, it will not cause a dead cycle. I think it should be that the internal mechanism of Flex has optimized this situation and made it trigger only once.
Use ActionScript to bind:
1. Use bindProperty().
bindProperty(site:Object, prop:String,host:Object, chain:Object,commitOnly:Boolean = false):ChangeWatcher, for example:
var myc:ChangeWatcher=(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, host is the binding source, and china is the binding source attribute chain - About the attribute chain, commitOnly defaults to False, that is, whether it is a confirmed event or an unconfirmed event, the binding will be triggered. When True, only a confirmation event can trigger the binding. This is generally not available, and it is related to Flex's own event mechanism. If it is false, two binding events will be triggered when the data is changed. When it is True, it will only trigger once. You can use the bindSetter method to test it. When you don't want to bind, you can use the () method to unbind.
2. Use bindSetter().
bindSetter(setter:Function, host:Object, chain:Object, commitOnly:Boolean = false):ChangeWatcher, for example:
var myc:ChangeWatcher=(change,text1,"text",true);
private function change(str:String):void
{
=str;
}
Change is the function triggered when the binding source changes, and the other parameters are the same.
3. Use ().
It is also very useful to use methods to monitor the changes in object properties.
watch(host:Object, chain:Object, handler:Function,commitOnly:Boolean = false):ChangeWatcher, for example:
var myc:ChangeWatcher=(text1,"text",change)；
private function change(e:Event):void
{
=;
}
The Event here is related to the trigger event defined by the binding data, and you can use the parent class Event of all events to represent.
Notice:
As mainly implements data binding through this class. There are the following differences in using MXML and as:
1. When using AS for data binding, AS code cannot be used in bindProperty() or bindSetter() methods. This is different from MXML. You can use bindSetter() method to declare a binding processing function.
2. When using AS for data binding, EX4 syntax cannot be used, which means that XML parsing syntax cannot be used directly.
3. When using AS for data binding, no functions and arrays can be used in the attribute chain.
It has better error prompts and warning functions.
Finally, let’s talk about attribute chains.
The property chain is the object represented by the chain parameters in methods such as bindProperty() and bindSettet(). Sometimes the binding source may not be just such a simple form, but can also be similar to. Then there is a problem with a relationship chain. If a certain item in this chain is changed, will the binding be triggered? The answer is that if you want it to change one of these to trigger data binding, then each element of the chain must be boundable. For the above form, you can use the bindProperty method like this:
bindProperty(text2, "text", this, ["user", "name","text1","text"])。