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

Flex 技术博客

醉里挑灯看剑,梦回吹角连营

 
 
 

日志

 
 

谈谈Flex中的数据绑定(Binding Datas)  

2007-09-28 16:03:22|  分类: Flex 基础 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

Flex中绑定的机理(Binding Mechanism):
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作为该函数的参数。

<?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属性中也可以使用{},如下面的例子中,其效果是等同的
<?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函数。

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

历史上的今天

评论

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

页脚

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