flex 数据绑定之理解

<!-- [if gte mso 9]><xml> <w:WordDocument> <w:View>Normal</w:View> <w:Zoom>0</w:Zoom> <w:PunctuationKerning /> <w:DrawingGridVerticalSpacing>7.8 磅</w:DrawingGridVerticalSpacing> <w:DisplayHorizontalDrawingGridEvery>0</w:DisplayHorizontalDrawingGridEvery> <w:DisplayVerticalDrawingGridEvery>2</w:DisplayVerticalDrawingGridEvery> <w:ValidateAgainstSchemas /> <w:SaveIfXMLInvalid>false</w:SaveIfXMLInvalid> <w:IgnoreMixedContent>false</w:IgnoreMixedContent> <w:AlwaysShowPlaceholderText>false</w:AlwaysShowPlaceholderText> <w:Compatibility> <w:SpaceForUL /> <w:BalanceSingleByteDoubleByteWidth /> <w:DoNotLeaveBackslashAlone /> <w:ULTrailSpace /> <w:DoNotExpandShiftReturn /> <w:AdjustLineHeightInTable /> <w:BreakWrappedTables /> <w:SnapToGridInCell /> <w:WrapTextWithPunct /> <w:UseAsianBreakRules /> <w:DontGrowAutofit /> <w:UseFELayout /> </w:Compatibility> <w:BrowserLevel>MicrosoftInternetExplorer4</w:BrowserLevel> </w:WordDocument> </xml><![endif]--><!-- [if gte mso 9]><xml> <w:LatentStyles DefLockedState="false" LatentStyleCount="156"> </w:LatentStyles> </xml><![endif]-->

之前写了《 flex 事件之理解》和《 flex meta tag 之理解》，本想是为写本文 flex 数据绑定之理解做铺垫的，谁知网上已有 flex 数据绑定之理解很好的文章，如下：

http://www.cnblogs.com/nianshi/archive/2010/05/19/1739407.html ， FLEX 数据绑定 (1)

http://www.cnblogs.com/nianshi/archive/2010/05/19/1739409.html ， FLEX 数据绑定 (2)

http://www.cnblogs.com/nianshi/archive/2010/05/19/1739411.html ， FLEX 数据绑定 (3)

因此，已无再详片大论 flex 绑定理解之需要，但是鉴于上述 3 篇文章稍显混论，看起来不是那么通俗易懂，为此，我简单的补充了一个 demo ，并且作简单归纳总结。

<!-- [if !supportLists]-->1、 <!-- [endif]-->flex 绑定通常有 3 中实现方式，即 FLEX 数据绑定 (1) 所述的 {} 绑定、 fx ： binding 和 as 代码实现 ( BindingUtils , ChangeWatcher );

<!-- [if !supportLists]-->2、 <!-- [endif]-->flex 绑定分单、双向绑定，默认情况下都是单向绑定；

<!-- [if !supportLists]-->3、 <!-- [endif]-->flex 绑定最常见的编写方式就是 [Bingable] 元标签及 {} 的引用；

<!-- [if !supportLists]-->4、 <!-- [endif]-->flex 绑定基于事件，只不过 [Bingable] 等同于 [Bindable(event="propertyChange")] 而已；

<!-- [if !supportLists]-->5、 <!-- [endif]-->flex 绑定可以基于简单的变量、也可基于复杂的对象、方法和事件；

/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

下述为 flex 3 种绑定方式实现的一个简单 demo 。

<?xml version="1.0" encoding="utf-8"?>

<s:Application xmlns:fx=" http://ns.adobe.com/mxml/2009 "

xmlns:s=" library://ns.adobe.com/flex/spark "

xmlns:mx=" library://ns.adobe.com/flex/mx " minWidth=" 955 " minHeight=" 600 "

creationComplete="initWatcher()" >

<s:layout>

<s:BasicLayout/>

</s:layout>

<fx:Declarations>

<!-- 将非可视元素（例如服务、值对象）放在此处 -->

</fx:Declarations>

<fx:Script>

<![CDATA[

import mx.binding.utils.BindingUtils;

import mx.binding.utils.ChangeWatcher ;

import mx.events.FlexEvent;

public function updateMyString(val:String): void {

p3_target.text = val.toUpperCase();

}

public function mySetterBinding(event:FlexEvent): void {

var watcherSetter:ChangeWatcher =

BindingUtils.bindSetter(updateMyString, p3_source, "text" );

}

public function initWatcher(): void {

ChangeWatcher .watch(p4_source, "text" , watcherListener);

}

public function watcherListener(event:Event): void {

p4_target.text=p4_source.text.toUpperCase();

}

]]>

</fx:Script>

<fx:Binding source=" p2_source.text " destination=" p2_target.text " />

<s:Panel x=" 9 " y=" 6 " width=" 462 " height=" 70 " title=" 大括号绑定 " id=" panel1 " >

<s:Label x=" 6 " y=" 10 " text=" source: " />

<mx:TextInput id=" p1_source " text=" Enter text here " x=" 50 " y=" 4 " />

<s:Label x=" 259 " y=" 10 " text=" target: " />

<mx:Text id=" p1_target " text=" { p1_source.text.toUpperCase() } " x=" 307 " y=" 4 " />

</s:Panel>

<s:Panel x=" 9 " y=" 84 " width=" 462 " height=" 98 " title=" mx:binding " id=" panel2 " >

<s:Label x=" 6 " y=" 10 " text=" source: " />

<mx:TextInput id=" p2_source " text=" Enter text here " x=" 50 " y=" 4 " />

<s:Label x=" 259 " y=" 10 " text=" target: " />

<mx:Text id=" p2_target " text="" x=" 307 " y=" 4 " />

<s:Label x=" 7 " y=" 43 " text=" fx:binding 等同于 BindingUtils.bindProperty(p2_target,'text',p2_source,'text'); " />

</s:Panel>

<s:Panel x=" 9 " y=" 190 " width=" 462 " height=" 70 " title=" actionscript binding ， bindSetter " id=" panel3 " >

<s:Label x=" 6 " y=" 10 " text=" source: " />

<mx:TextInput id=" p3_source " text=" Enter text here " x=" 50 " y=" 4 " />

<s:Label x=" 259 " y=" 10 " text=" target: " />

<mx:Text id=" p3_target " text="" x=" 307 " y=" 4 " initialize="mySetterBinding(event);" />

</s:Panel>

<s:Panel x=" 9 " y=" 272 " width=" 462 " height=" 70 " title=" actionscript binding ， changewatcher " id=" panel0 " >

<s:Label x=" 6 " y=" 10 " text=" source: " />

<mx:TextInput id=" p4_source " text=" Enter text here " x=" 50 " y=" 4 " />

<s:Label x=" 259 " y=" 10 " text=" target: " />

<mx:Text id=" p4_target " text="" x=" 307 " y=" 4 " />

</s:Panel>

</s:Application>