本文和大家重點(diǎn)討論一下如何在不依賴Flex框架的情況下實(shí)現(xiàn)簡單的Flex數(shù)據(jù)綁定問題，在Flex項(xiàng)目中，F(xiàn)lex數(shù)據(jù)綁定是非常常見的代碼編寫方式，通過這種方式，我們可以減輕很多繁瑣的數(shù)據(jù)更新工作，并解除一些不必要的耦合。

如何在不依賴Flex框架的情況下實(shí)現(xiàn)簡單的Flex數(shù)據(jù)綁定

問題

在Flex項(xiàng)目中，F(xiàn)lex數(shù)據(jù)綁定是非常常見的代碼編寫方式，通過這種方式，我們可以減輕很多繁瑣的數(shù)據(jù)更新工作，并解除一些不必要的耦合。如果你還不了解綁定，點(diǎn)擊這里查看關(guān)于Flex中綁定的視頻。

如果我們是一個(gè)純ActionScript或Flash項(xiàng)目，不想依賴體積大的Flex框架，而又想使用其中的綁定機(jī)制，該如何做呢？我們可以遵循綁定的思路，自己編寫代碼實(shí)現(xiàn)綁定的方法。這里以簡單的字符串綁定為例，說明這個(gè)過程，當(dāng)然要完整的實(shí)現(xiàn)對(duì)所有數(shù)據(jù)類型的綁定機(jī)制還是要編寫更多的代碼的，請(qǐng)參照Flex中對(duì)于綁定的實(shí)現(xiàn)。

解答

首先來看一下這個(gè)例子最終完成的Demo演示：

下面來看看是如何實(shí)現(xiàn)這套機(jī)制的，首先我們來創(chuàng)建一個(gè)可綁定的數(shù)據(jù)類，并實(shí)現(xiàn)對(duì)綁定對(duì)象的數(shù)據(jù)更新，注意主要是要用bind和unlock兩個(gè)方法來實(shí)現(xiàn)對(duì)Flex數(shù)據(jù)綁定和解除綁定：
 

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);   
 }  
 }  
}  

 其中對(duì)綁定的數(shù)據(jù)更新要依賴一個(gè)manager類來實(shí)現(xiàn)，參見下面的代碼：
 

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.首先創(chuàng)建一個(gè)BindableObject

2.調(diào)取它的bind方法，綁定到要更新的對(duì)象，比如：bindExpObj.bind(main.txt1,"text");

3.在需要的時(shí)候，對(duì)數(shù)據(jù)源更新，比如：bindExpObj.property=main.stringSRC.text;

4.解除Flex數(shù)據(jù)綁定，使用unlock方法，參數(shù)與bind相同，比如：bindExpObj.unlock(main.txt1,"text");

【編輯推薦】

1. Flex數(shù)據(jù)綁定中使用Bindable元數(shù)據(jù)標(biāo)記的三種方式
2. Flex基礎(chǔ) 創(chuàng)建***個(gè)Flex項(xiàng)目
3. Flex數(shù)據(jù)綁定中綁定到函數(shù)、對(duì)象和數(shù)組
4. FlexBuilder3.0與Eclipse3.4的***結(jié)合
5. 學(xué)習(xí)筆記 FlexBuilder2.0中如何使用基于Lists的控件