`

FLEX:Data Binding 数据绑定

    博客分类:
  • FLEX
阅读更多
务须精读的文章:
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
分享到:
评论

相关推荐

    Flex Data Binding详解

    Flex Data Binding是Adobe Flex框架中的核心特性之一,它允许开发者创建数据驱动的应用程序,通过将UI组件的属性与数据模型的属性直接关联,实现实时的数据同步。在Flex中,数据绑定确保当数据源发生变化时,相关的...

    flex数据绑定的原理

    在Flex开发中,数据绑定(Data Binding)是一种强大的机制,它允许UI组件的状态与应用程序的数据模型之间自动同步。数据绑定的原理是通过监听数据源的变化,并自动更新与之绑定的UI组件,反之亦然,从而简化了代码并...

    flex企业应用开发笔记-数据绑定

    在Flex企业应用开发中,数据绑定是连接UI组件与数据模型的重要机制,使得视图能够自动反映模型的变化,反之亦然。这篇笔记主要探讨的是如何在Flex中实现数据绑定,以及其在实际应用中的作用。 数据绑定是Flex框架的...

    Flex Bind数据绑定实例代码

    在ActionScript 3.0中,Flex的数据绑定主要通过两个类来实现:mx.binding.Binding和mx.binding.utils.BindingUtils。Binding类用于创建和管理数据绑定,而BindingUtils提供了一些静态方法,方便进行数据绑定操作。 ...

    flex数据绑定

    - **单向绑定**:数据源改变时,目标自动更新,但目标的改变不会影响数据源。 - **双向绑定**:数据源和目标之间的变化会相互影响,常见于表单输入控件。 3. **ActionScript数据绑定**: 使用`bind()`方法可以在...

    数据处理和数据服务PPT课件.ppt

    Flex 2在数据处理方面有了显著的增强,引入了Flex Data Service 2,使得客户端和服务器之间的数据交互变得更加高效和便捷。本章节主要围绕Flex中的数据处理和绑定数据两大核心概念展开。 1. Flex中的数据处理: 在...

    flex builder 4 help

    7. **Data Binding(数据绑定)**:Flex 4的数据绑定机制允许属性之间的自动同步,简化了数据驱动组件的开发。开发者可以通过数据绑定将UI组件与后台数据源关联起来。 8. **Integration with other Adobe ...

    flex第一步所有源码

    5. Data Binding:Flex支持数据绑定,这意味着UI组件的属性可以直接与数据模型关联,当数据模型改变时,UI会自动更新,反之亦然。 6. Events and Event Handling:Flex应用程序中的组件可以触发和监听事件,通过...

    flex项目源码(本人亲自测试可用)

    6. **Data Binding**:Flex支持数据绑定,使得UI组件的属性能够自动与应用程序数据模型同步,简化了数据驱动UI的开发。 7. **Flex Compiler**:编译器将MXML和ActionScript代码转换为SWF文件,这个文件可以在Web...

    巨大数量的Flex例子,学习Flex的好

    6. **Data Binding**: Flex支持数据绑定,使得UI组件的状态可以直接与数据模型关联,简化了代码并提高了可维护性。 7. **Services and Data Access**: Flex可以与各种后端服务进行通信,如AMF、SOAP、REST等,同时...

    b.rar_flex

    7. Data Binding:Flex支持数据绑定,使得UI组件的属性可以自动与应用程序的数据模型保持同步。 8. Events and Event Handling:Flex组件可以触发和监听事件,用于实现用户交互和组件间的通信。 了解以上知识点后,...

    flex4 视频教程截取的一些图片

    5. **Data Binding**:数据绑定是 Flex 4 中的核心特性,它允许视图和模型之间的双向通信,使得数据的改变能实时反映到界面上。 6. ** States 和 Layouts**:Flex 4 改进了状态管理和布局管理,开发者可以更精确地...

    Flex4.0中文API.rar

    6. **Data Binding**:Flex 4.0的数据绑定机制更加灵活,支持双向数据绑定,使得视图和模型之间的数据同步更加自动化。 7. **BlazeDS集成**:BlazeDS是Flex与Java服务器通信的中间件,Flex 4.0中对BlazeDS的支持...

    最新最全的FLEX++网站源码

    6. **Data Binding**:Flex支持数据绑定,这意味着视图组件的状态可以自动与模型数据同步,简化了开发过程。 7. ** skins和styles**:Flex应用可以通过皮肤和样式表定制UI外观。源码中可能包含自定义的皮肤文件和...

    flex源码_董龙飞

    5. **Flex Data Binding**:Flex支持数据绑定,允许UI组件的状态与后台数据模型自动同步。这种特性简化了UI与数据间的交互,源码中可能会有相关的实现示例。 6. **Event Handling**:在Flex应用中,事件处理是关键...

    [Flex.3实战].(美)艾哈迈德,(美)赫希,(美)阿比德.扫描版

    5. **Data Binding**:Flex 3支持数据绑定,能实现UI元素与应用程序数据之间的自动同步,简化了数据驱动应用的开发。 6. **Services and Remoting**:Flex 3提供了与服务器进行数据交换的机制,如AMF(Action ...

    Adobe Flex 3 API

    5. **Data Binding**: 数据绑定是Flex的一个关键特性,它自动将视图组件的状态与应用程序数据模型关联起来。这意味着当数据模型发生变化时,相关的界面元素会自动更新,反之亦然。 6. **Services and Remoting**: ...

    flex文档中文的pdf文档

    4. Data Binding:数据绑定是Flex的一大特性,允许UI组件的状态自动反映模型数据的变化,反之亦然,降低了代码的复杂性。 5. ActionScript 3.0:作为Flex的主要编程语言,AS3提供了面向对象的编程支持,包括类、接口...

Global site tag (gtag.js) - Google Analytics