注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

让一切都逝去吧

排骨炖泥菜/猪肝炒苹果/鱼籽狗肉汤/狗头薏米汤

 
 
 

日志

 
 

Flex的三种绑定  

2009-02-16 09:38:15|  分类: Flex |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

Flex实际上在编译的时候会产生一些Watcher代码去监视绑定标签所指定的表达式。在运行的时候,当绑定源的属性得到修改,那么这个Watcher监视类就会触发change事件去执行绑定更新的工作。在Flex中有三种绑定数据方式:

1、{}

2、<mx:Binding> tag in MXML

3、BindingUtils methods in ActionScript

1、最常用的就是通过大括号{}的形式。

在{}绑定方式中,可以绑定property,ActionScript expressions,E4

X expression和ActionScript functions。绑定一个属性或者一段AS的表达式已经应用的非常普遍了。偶尔我们需要用到绑定的是一个AS的函数,但是,绑定一个函数的时候很多人 会碰到问题,为什么我的数据没有自动更新呢?本人也曾经碰到过,看了开发文档才知道,原来忽略了一个细节问题。

就是在绑定函数的时候,通常情况下需要一个bindable的property作为该函数的参数。

代码

  1. <?xml version="1.0"?>   
  2. <!– binding/ASInBraces.mxml –>   
  3. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">   
  4.      <mx:Script>   
  5.           <![CDATA[   
  6.               [Bindable]   
  7.               public var inString:String; // 绑定此变量   
  8.             
  9.               public function getNewText(sourceString:String):String {   
  10.                    return sourceString.toUpperCase();   
  11.               }   
  12.          ]]>   
  13.      </mx:Script>   
  14.      <mx:TextInput id="myTI" text="Enter text here"/>   
  15.      <mx:Button label="Trigger Binding" click="inString=myTI.text;"/>   
  16.      <mx:TextArea text="{getNewText(inString)}"/>   
  17. </mx:Application>  

<?xml version="1.0"?><!– binding/ASInBraces.mxml –><mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"> <mx:Script> <![CDATA[ [Bindable] public var inString:String; // 绑定此变量 public function getNewText(sourceString:String):String { return sourceString.toUpperCase(); } ]]> </mx:Script> <mx:TextInput id="myTI" text="Enter text here"/> <mx:Button label="Trigger Binding" click="inString=myTI.text;"/> <mx:TextArea text="{getNewText(inString)}"/></mx:Application>

这里的inString一旦发生改变,会直接触发函数getNewText进行重新执行。

但如果你将函数的参数inString去掉,而直接放到getNewText()中,那么这个函数会在系统初始化的时候执行一次,而起不到绑定的效果。我可是在实际开发中有深刻体会。

2、用<mx:Binding>标签效果和{}一样,只需要指定source和destination两个属性即可,如:

<mx:Binding source="firstName.text" destination="myEmployee.name.first"/>

在<mx:Binding>的source属性中也可以使用{},如下面的例子中,其效果是等同的

代码

  1. <?xml version="1.0"?>   
  2. <!– binding/ASInBindingTags.mxml –>   
  3. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">   
  4.      <mx:Script>   
  5.           <![CDATA[   
  6.               public function whatDogAte():String {   
  7.                    return "homework";   
  8.               }   
  9.          ]]>   
  10.      </mx:Script>   
  11.      <mx:Binding source="’The dog ate my ‘+ whatDogAte()"  destination="field1.text"/>   
  12.      <mx:Binding  source="{’The dog ate my ‘+ whatDogAte()}" destination="field2.text"/>   
  13.      <mx:Binding source="The dog ate my {whatDogAte()}" destination="field3.text"/>   
  14.      <mx:TextArea id="field1"/>   
  15.      <mx:TextArea id="field2"/>   
  16.      <mx:TextArea id="field3"/>   
  17. </mx:Application>  

<?xml version="1.0"?><!– binding/ASInBindingTags.mxml –><mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"> <mx:Script> <![CDATA[ public function whatDogAte():String { return "homework"; } ]]> </mx:Script> <mx:Binding source="’The dog ate my ‘+ whatDogAte()" destination="field1.text"/> <mx:Binding source="{’The dog ate my ‘+ whatDogAte()}" destination="field2.text"/> <mx:Binding source="The dog ate my {whatDogAte()}" destination="field3.text"/> <mx:TextArea id="field1"/> <mx:TextArea id="field2"/> <mx:TextArea id="field3"/></mx:Application>

3、在ActionScript中实现绑定

这种方法是使用mx.binding.utils.BindingUtils类来实现的。

如:

BindingUtils.bindProperty(textarea, "text", textinput, "text");

就是直接绑定了两个输入框的text属性,还可以用bindSetter来绑定一个数据源和一个set函数。如:

public function mySetterBinding(event:FlexEvent):void {

     var watcherSetter:ChangeWatcher =  BindingUtils.bindSetter(setMyString, textInput2, "text");

}

这里就是将textInput2的text属性setter函数和setMyString函数绑定起来,

一旦textInput2的text被修改,那么将会触发setMyString函数。

  评论这张
 
阅读(619)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017