FLEX:Data Binding 数据绑定

务须精读的文章:
Flex data binding pitfalls: common misuses and mistakes:
http://www.adobe.com/devnet/flex/articles/databinding_pitfalls.html

译文:Flex 数据绑定易犯的错误:普遍的误用和错误:
http://www.cnblogs.com/kakaflex/archive/2011/04/14/2016340.html



the '@{}' form is new in Flex 4 and is used to do two way binding.


原创系列之:Flex数据绑定基础介绍[转]:
http://www.cnblogs.com/crkay/archive/2011/04/08/2009125.html
引用
Flex为我们提供了多种使用数据绑定的方式,归纳起来通常有以下几种:
{}绑定实现
<Binding />标记绑定实现
应用BindingUtil类绑定实现
ChangeWacher绑定实现
[Bindable]元标签绑定实现
双向绑定



Using data binding:
http://www.adobe.com/devnet/flex/quickstarts/using_data_binding.html


在做修改操作时(刚打开修改页面时要取vo,并将vo的值绑定到修改页面form的各个输入域;同时,在点击提交按钮后form各输入域的现有值也应该收集并绑定到要提交给后台的vo),最好的收集页面数据的方式就是使用FLEX4的双向绑定新特性(FLEX3中也可以使用双向绑定的:输入域通过{}绑定vo属性;vo属性通过<mx:Binding source="输入域.text" destination="vo.property" />绑定页面输入域。从而得出:flex3的双向绑定是通过双方都是bindable来实现的;这里说的“felx4的双向绑定新特性”,指的是flex4中只在任一方做一次绑定就可以做到双向绑定的新特性)。FLEX4两种实现双向绑定的新特性:
一 使用内联的 @{bindable_property} 语法
二 使用绑定标签(<mx:Binding> 或 <fx:Binding>) 时指定其twoWay="true"(twoWay是4新加的Binding标签属性)

Two-way Data Binding - Functional and Design Specification:
http://opensource.adobe.com/wiki/display/flexsdk/Two-way+Data+Binding这篇文章中的例子Examples非常好!
引用
The two ways to specify a two-way data binding are:
  • inline declaration using the syntax, @{bindable_property}
  • with MXML, <mx:Binding source="a.property" destination="b.property" twoWay="true />

Two-Way Data Binding in Flex 4:
http://www.artima.com/articles/two_way_binding.html
引用
Flex has provided one-way data binding since its inception, and Flex 4 adds two-way data binding as well: Flex 4's two-way data binding provides special syntax for specifying that a pair of object properties should always update each other.

Arranging for the two properties to mutually update each other required two separate data binding steps in Flex 3:
<TextInput id="fahrenheit" text="{celsius.text}"/>
<TextInput id="celsius" text="{fahrenheit.text}">

In Flex 4, this can be accomplished with a single expression(即4之新特性):
<TextInput id="fahrenheit" text="@{celsius.text}"/>
<TextInput id="celsius">

Flex 3: Two-way Form Databinding:
http://johncblandii.com/2008/06/flex-3-two-way-form-databinding.html
Bindable combobox - selected item/index:
http://stackoverflow.com/questions/997504/bindable-combobox-selected-item-index





经测试:
@{}和<fx:Binding .. twoWay="true"/>两种实现双向绑定的方式是有区别的!
<!-- 用这种方式绑定textinput输入框:如果 fidsDepfVo.flight(String类型) is null(比如在增加页面,在尚未输值情况下肯定应该是null), 
	则使用了下面的绑定方式后fidsDepfVo.flight的值会由null变为空串""!即使你对调 fx:Binding 标签的source 和destination属性,问题依然存在。-->
	<fx:Binding source="flight.text" destination="fidsDepfVo.flight" twoWay="true"/>
	
	
	<!-- 用@{}的方式不会出现fidsDepfVo.flight 由 null变为空串 "" 的问题 -->
	<s:TextInput width="124" id="flight" text="@{fidsDepfVo.flight}" />
这里仅仅是对String()的双向绑定问题做了探讨;其他类型,如Date、自定义Vo(最好不要是Object类型,而强转成自定义Vo,否则会报warning:unable to bind to property "xxx" on class  Object(class is not an IEventDispatcher))等,在使用了fx:Binding 方式做双向绑定后是否会有问题,还待再议。
经测试:Number类型也存在这个问题!Flex中Number未初始化时的类型为NaN;当用<fx:binding>的方式对Number类型做绑定(startNum为Vo中类型为Number的属性):
<fx:Binding source="dc8StartNum.text" destination="devChannelAC.getItemAt(7).startNum" />
这句绑定语句执行后,该Vo的startNum的值立马由NaN变成了0!


Binding read-only accessors in Flex:
http://www.rubenswieringa.com/blog/binding-read-only-accessors-in-flex

你可能感兴趣的:(html,Flex,Adobe)