I never really understood the point of binding, beyond it being effectively shorthand for addeventlistener.
is there more to it? am I missing something?
thanks, dsdsdsdsd
Data binding is all about declaratively defining how data is displayed in the UI. Under the hood, it is a bit more complicated, because there are more needs than just hooking addEventListener
to support the features of data binding.
It is a very powerful feature, actually, and to understand it more, we can look at a simple "Hello World" application:
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark">
<s:HGroup>
<s:TextInput id="input" />
<s:Label text="Hello {input.text}" />
</s:HGroup>
</s:Application>
Now, compile this app with the --keep
compiler flag and look at the new folder "bin-debug/generated". We are interested in HelloWorld-generated.as
Here is where that binding gets defined and called from the constructor:
private function _HelloWorld_bindingsSetup():Array
{
var result:Array = [];
result[0] = new mx.binding.Binding(this,
function():String
{
var result:* = "Hello " + (input.text);
return (result == undefined ? null : String(result));
},
null,
"_HelloWorld_Label1.text"
);
return result;
}
A little later, in the HelloWorld constructor, you get a call to set up the watchers:
_watcherSetupUtil.setup(this,
function(propertyName:String):* { return target[propertyName]; },
function(propertyName:String):* { return HelloWorld[propertyName]; },
bindings,
watchers);
Which really just does this:
watchers[0] = new mx.binding.PropertyWatcher("input",
{ propertyChange: true },
[ bindings[0] ] ,
propertyGetter );
watchers[1] = new mx.binding.PropertyWatcher("text",
{ change: true,
textChanged: true },
[ bindings[0] ],
null);
Things get more complicated with two-way bindings.