轻松实现Flex数据绑定

开发 后端
Flex数据绑定的概念你是否熟悉,这里向大家简单介绍一下如何在不依赖Flex框架的情况下实现简单的Flex数据绑定,希望对你有所帮助。

本文和大家重点讨论一下如何在不依赖Flex框架的情况下实现简单的Flex数据绑定问题,在Flex项目中,Flex数据绑定是非常常见的代码编写方式,通过这种方式,我们可以减轻很多繁琐的数据更新工作,并解除一些不必要的耦合。

如何在不依赖Flex框架的情况下实现简单的Flex数据绑定

问题

在Flex项目中,Flex数据绑定是非常常见的代码编写方式,通过这种方式,我们可以减轻很多繁琐的数据更新工作,并解除一些不必要的耦合。如果你还不了解绑定,点击这里查看关于Flex中绑定的视频。

如果我们是一个纯ActionScript或Flash项目,不想依赖体积大的Flex框架,而又想使用其中的绑定机制,该如何做呢?我们可以遵循绑定的思路,自己编写代码实现绑定的方法。这里以简单的字符串绑定为例,说明这个过程,当然要完整的实现对所有数据类型的绑定机制还是要编写更多的代码的,请参照Flex中对于绑定的实现。

解答

首先来看一下这个例子最终完成的Demo演示:


下面来看看是如何实现这套机制的,首先我们来创建一个可绑定的数据类,并实现对绑定对象的数据更新,注意主要是要用bind和unlock两个方法来实现对Flex数据绑定和解除绑定:
 

  1. package{   
  2. publicclassBindableObject   
  3. {    
  4. publicvarbindProperty:*;    
  5. publicfunctionBindableObject(value:*=null):void{     
  6. bindProperty=value;    
  7. }   
  8.    
  9. publicfunctionsetproperty(p:*):void{   
  10.   bindProperty=p;    
  11.  BindManager.refresh(this);   
  12.  }    
  13. publicfunctiongetproperty():*{     
  14. returnbindProperty;    
  15. }  
  16.     
  17. publicfunctionbind(obj:*,property:String):void{     
  18. BindManager.registBindableObject(obj,property,this);    
  19. }  
  20.     
  21. publicfunctionunlock(obj:*,property:String):void{    
  22.  BindManager.unlockBindableObject(obj,property,this);   
  23.  }  
  24.  }  
  25. }  

 其中对绑定的数据更新要依赖一个manager类来实现,参见下面的代码:
 

  1. package{   
  2. importflash.utils.Dictionary;   
  3. publicclassBindManager {    
  4. publicstaticvarvalueDic:Dictionary=newDictionary();    
  5. publicstaticfunctionregistBindableObject(obj:*,property:String,value:BindableObject):void{     
  6. if(value.property!=null)obj[property]=value.property;     
  7. if(valueDic[value]==null){      
  8. valueDic[value]=[];     
  9. }     
  10. valueDic[value].push(newInnerBindableObject(obj,property));    
  11. }  
  12.     
  13. publicstaticfunctionunlockBindableObject(obj:*,property:String,value:BindableObject):void{     
  14. if(value!=null){      
  15. varneedCheckObjs:Array=valueDic[value];      
  16. foreach(varitem:InnerBindableObjectinneedCheckObjs){       
  17. if(obj==item.obj&&property==item.property){        
  18. varindex:int=needCheckObjs.indexOf(item);        
  19. if(index!=-1)needCheckObjs.splice(index,1);      
  20.  }      
  21. }     
  22. }    
  23. }  
  24.     
  25. publicstaticfunctionrefresh(value:BindableObject=null):void{     
  26.  
  27. if(value!=null){      
  28. varneedRefObjs:Array=valueDic[value];   
  29.      
  30. foreach(varitem:InnerBindableObjectinneedRefObjs){     
  31.   if(item.obj!=null){     
  32.    item.obj[item.property]=value.property;     
  33.   }    
  34.   }     
  35. }   
  36.  }  
  37.  }}  
  38.  
  39. classInnerBindableObject{   
  40.  
  41. publicfunctionInnerBindableObject(o:*,p:String):void{   
  42.  oobj=o;    
  43. pproperty=p;  
  44.  }   
  45. publicvarobj:*; publicvarproperty:String;  
  46.  
  47. }  
  48.  

 使用方法:

1.首先创建一个BindableObject

2.调取它的bind方法,绑定到要更新的对象,比如:bindExpObj.bind(main.txt1,"text");

3.在需要的时候,对数据源更新,比如:bindExpObj.property=main.stringSRC.text;

4.解除Flex数据绑定,使用unlock方法,参数与bind相同,比如:bindExpObj.unlock(main.txt1,"text");

【编辑推荐】

  1. Flex数据绑定中使用Bindable元数据标记的三种方式
  2. Flex基础 创建***个Flex项目
  3. Flex数据绑定中绑定到函数、对象和数组
  4. FlexBuilder3.0与Eclipse3.4的***结合
  5. 学习笔记 FlexBuilder2.0中如何使用基于Lists的控件 

 

责任编辑:佚名 来源: riameeting.com
相关推荐

2010-07-28 13:11:13

Flex数据绑定

2010-07-28 13:31:10

Flex数据绑定

2010-07-30 09:08:21

Flex数据绑定

2010-08-12 11:34:15

Flex数据绑定

2010-08-10 10:56:39

2010-07-28 13:40:44

Flex数据绑定

2010-08-10 13:15:36

Flex配置

2010-07-30 10:45:08

Flex数据绑定

2010-07-30 09:16:24

Flex数据绑定

2010-07-30 10:23:46

Flex数据绑定

2010-07-30 10:53:53

Flex数据绑定

2010-07-28 13:48:49

Flex数据绑定

2010-08-12 11:05:33

Flex数据绑定

2010-07-30 10:30:58

Flex数据绑定

2010-07-28 13:54:42

Flex数据绑定

2010-08-12 10:10:37

FlexMapABC

2010-08-06 10:15:35

Flex绑定

2010-08-13 14:19:44

Flex绑定机制

2010-08-12 10:43:19

Flex数据绑定

2010-07-30 09:28:09

Flex数据绑定
点赞
收藏

51CTO技术栈公众号