轻松实现Flex数据绑定

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

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

问题

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

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

解答

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

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

 
 
 
 
  
  
  
  
package{   
  
  
  
  
publicclassBindableObject   
  
  
  
  
{    
  
  
  
  
publicvarbindProperty:*;    
  
  
  
  
publicfunctionBindableObject(value:*=null):void{     
  
  
  
  
bindProperty=value;    
  
  
  
  
}   
  
  
  
  
   
  
  
  
  
publicfunctionsetproperty(p:*):void{   
  
  
  
  
  bindProperty=p;    
  
  
  
  
 BindManager.refresh(this);   
  
  
  
  
 }    
  
  
  
  
publicfunctiongetproperty():*{     
  
  
  
  
returnbindProperty;    
  
  
  
  
}  
  
  
  
  
    
  
  
  
  
publicfunctionbind(obj:*,property:String):void{     
  
  
  
  
BindManager.registBindableObject(obj,property,this);    
  
  
  
  
}  
  
  
  
  
    
  
  
  
  
publicfunctionunlock(obj:*,property:String):void{    
  
  
  
  
 BindManager.unlockBindableObject(obj,property,this);   
  
  
  
  
 }  
  
  
  
  
 }  
  
  
  
  
}  
 
 
 

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

 
 
 
 
  
  
  
  
package{   
  
  
  
  
importflash.utils.Dictionary;   
  
  
  
  
publicclassBindManager {    
  
  
  
  
publicstaticvarvalueDic:Dictionary=newDictionary();    
  
  
  
  
publicstaticfunctionregistBindableObject(obj:*,property:String,value:BindableObject):void{     
  
  
  
  
if(value.property!=null)obj[property]=value.property;     
  
  
  
  
if(valueDic[value]==null){      
  
  
  
  
valueDic[value]=[];     
  
  
  
  
}     
  
  
  
  
valueDic[value].push(newInnerBindableObject(obj,property));    
  
  
  
  
}  
  
  
  
  
    
  
  
  
  
publicstaticfunctionunlockBindableObject(obj:*,property:String,value:BindableObject):void{     
  
  
  
  
if(value!=null){      
  
  
  
  
varneedCheckObjs:Array=valueDic[value];      
  
  
  
  
foreach(varitem:InnerBindableObjectinneedCheckObjs){       
  
  
  
  
if(obj==item.obj&&property==item.property){        
  
  
  
  
varindex:int=needCheckObjs.indexOf(item);        
  
  
  
  
if(index!=-1)needCheckObjs.splice(index,1);      
  
  
  
  
 }      
  
  
  
  
}     
  
  
  
  
}    
  
  
  
  
}  
  
  
  
  
    
  
  
  
  
publicstaticfunctionrefresh(value:BindableObject=null):void{     
  
  
  
  
 
  
  
  
  
if(value!=null){      
  
  
  
  
varneedRefObjs:Array=valueDic[value];   
  
  
  
  
     
  
  
  
  
foreach(varitem:InnerBindableObjectinneedRefObjs){     
  
  
  
  
  if(item.obj!=null){     
  
  
  
  
   item.obj[item.property]=value.property;     
  
  
  
  
  }    
  
  
  
  
  }     
  
  
  
  
}   
  
  
  
  
 }  
  
  
  
  
 }}  
  
  
  
  
 
  
  
  
  
classInnerBindableObject{   
  
  
  
  
 
  
  
  
  
publicfunctionInnerBindableObject(o:*,p:String):void{   
  
  
  
  
 oobj=o;    
  
  
  
  
pproperty=p;  
  
  
  
  
 }   
  
  
  
  
publicvarobj:*; publicvarproperty:String;  
  
  
  
  
 
  
  
  
  
}  
  
  
  
  
 
 
 
 

 使用方法：

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的控件 

文章标题：轻松实现Flex数据绑定
转载源于：http://www.hantingmc.com/qtweb/news9/367159.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联