开发者

is binding simple a shortcut for addeventlistener

开发者 https://www.devze.com 2023-03-04 07:27 出处:网络
I never really understood the point of 开发者_运维技巧binding, beyond it being effectively shorthand for addeventlistener.

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.


Data Binding in Flex 4 COULD I guess be described as a shortcut for addEventListener() - but that's a bit like saying that cars are just a shortcut for walking. If you're only going around the block, no big deal - but if you're building a complex application with lots of item renderers and lots of data points that can vary at a moment's notice, data binding lets you avoid writing hundreds of addEventListener() and removeEventListener() calls, as well as their associated handlers. It's kind of a really big deal, in that context.

0

精彩评论

暂无评论...
验证码 换一张
取 消