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

Posted 四月 18th, 2010 by 郭少瑞

数据绑定

问题

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

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

解答

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

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

package
{
	public class BindableObject
	{
		public var bindProperty:*;
 
		public function BindableObject(value:* = null):void {
			bindProperty = value;
		}
 
		public function set property(p:*):void{
			bindProperty = p;
			BindManager.refresh(this);
		}
		public function get property():*{
			return bindProperty;
		}
 
		public function bind(obj:*,property:String):void {
			BindManager.registBindableObject(obj,property,this);
		}
 
		public function unlock(obj:*,property:String):void {
			BindManager.unlockBindableObject(obj,property,this);
		}
 
	}
}

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

package
{
	import flash.utils.Dictionary;
 
	public class BindManager
	{
		public static var valueDic:Dictionary = new Dictionary();
 
		public static function registBindableObject(obj:*,property:String,value:BindableObject):void {
			if(value.property!=null) obj[property] = value.property;
			if(valueDic[value] == null) {
				valueDic[value] = [];
			}
			valueDic[value].push(new InnerBindableObject(obj,property));
		}
 
		public static function unlockBindableObject(obj:*,property:String,value:BindableObject):void {
			if(value != null) {
				var needCheckObjs:Array = valueDic[value];
				for each(var item:InnerBindableObject in needCheckObjs) {
					if(obj == item.obj && property == item.property) {
						var index:int = needCheckObjs.indexOf(item);
						if(index!=-1) needCheckObjs.splice(index,1);
					}
				}
			}
		}
 
		public static function refresh(value:BindableObject = null):void {
			if(value != null) {
				var needRefObjs:Array = valueDic[value];
				for each(var item:InnerBindableObject in needRefObjs) {
					if(item.obj != null) {
						item.obj[item.property] = value.property;
					}
				}
			}
		}
	}
 
}
class InnerBindableObject {
	public function InnerBindableObject(o:*,p:String):void {
		obj = o;
		property = p;
	}
	public var obj:*;
	public var property:String;
}

使用方法：

1.首先创建一个BindableObject

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

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

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

完整的示例代码如下：

package
{
 
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.events.MouseEvent;
 
	[SWF(width=400, height=400, frameRate=25,backgroundColor=0xFFFFFF)]
	public class AS3TestBind extends Sprite
	{
		private var main:MainContainer = new MainContainer();
		private var bindExpObj:BindableObject = new BindableObject("");
		private var cb:NeoComboBox = new NeoComboBox();
 
		public function AS3TestBind()
		{
			super();
			cb.selected = true;
			cb.y = 10;
			cb.x = 320;
			cb.addEventListener(MouseEvent.CLICK,unlockBind);
			main.stringSRC.addEventListener(Event.CHANGE,dataChange);
			bindExpObj.bind(main.txt1,"text");
			bindExpObj.bind(main.txt2,"text");
			bindExpObj.bind(main.txt3,"text");
			bindExpObj.bind(main.mc.txt,"text");
			addChild(main);
			main.addChild(cb);
		}
 
		private function dataChange(...args):void {
			bindExpObj.property = main.stringSRC.text;
		}
 
		private function unlockBind(...args):void {
			if(cb.selected == true) {
				bindExpObj.unlock(main.txt1,"text");
				bindExpObj.unlock(main.txt2,"text");
				bindExpObj.unlock(main.txt3,"text");
				bindExpObj.unlock(main.mc.txt,"text");
				cb.selected = false;
				cb.tip.visible = false;
			} else {
				bindExpObj.bind(main.txt1,"text");
				bindExpObj.bind(main.txt2,"text");
				bindExpObj.bind(main.txt3,"text");
				bindExpObj.bind(main.mc.txt,"text");
				cb.selected = true;
				cb.tip.visible = true;
			}
		}
 
	}
}