`
vip_chenlin
  • 浏览: 7368 次
  • 性别: Icon_minigender_1
  • 来自: 西安
最近访客 更多访客>>
文章分类
社区版块
存档分类
最新评论

Flex 双向绑定 工具类

阅读更多

最近做Flex项目,碰到了双向绑定的问题,

查了下网上,有解决方法

 

简单说就是 2个单项绑定 + 简易的同步机制

 

看代码:

Java代码 复制代码
  1. /**实现双向绑定工具类*/  
  2.     public class BindingUtil{   
  3.            
  4.            
  5.         /**绑定方法*/  
  6.         public static function bind(obj1:Object,prop1:String,obj2:Object,prop2:String):void{   
  7.                
  8.             /**是否在改变标志,类似 数据同步机制*/  
  9.             var flag:Boolean = false;   
  10.                
  11.             ChangeWatcher.watch(obj1,prop1,function(event:Event):void{   
  12.                 if(!flag){   
  13.                     /**锁定对象*/  
  14.                     flag = true;   
  15.                     obj2[prop2] = obj1[prop1];   
  16.                     /**解锁对象*/  
  17.                     flag = false;   
  18.                 }   
  19.             });   
  20.                
  21.             ChangeWatcher.watch(obj2,prop2,function(event:Event):void{   
  22.                 if(!flag){   
  23.                     /**锁定对象*/  
  24.                     flag = true;   
  25.                     obj1[prop1] = obj2[prop2];   
  26.                     /**解锁对象*/  
  27.                     flag = false;   
  28.                 }   
  29.             });   
  30.         }   
  31.     }  
/**实现双向绑定工具类*/
	public class BindingUtil{
		
		
		/**绑定方法*/
		public static function bind(obj1:Object,prop1:String,obj2:Object,prop2:String):void{
			
			/**是否在改变标志,类似 数据同步机制*/
			var flag:Boolean = false;
			
			ChangeWatcher.watch(obj1,prop1,function(event:Event):void{
				if(!flag){
					/**锁定对象*/
					flag = true;
					obj2[prop2] = obj1[prop1];
					/**解锁对象*/
					flag = false;
				}
			});
			
			ChangeWatcher.watch(obj2,prop2,function(event:Event):void{
				if(!flag){
					/**锁定对象*/
					flag = true;
					obj1[prop1] = obj2[prop2];
					/**解锁对象*/
					flag = false;
				}
			});
		}
	}

 

可以看到

 

使用了ChangeWatcher注册了一个函数,并且使用了闭包的特性

使得 var flag:Boolean 变量可以 在匿名函数中使用

 

其实 flag的作用就是 类似 java的synchronized

 

放置时间争抢改变属性的作用

 

 

但是如果像这样写,那么不是很理想

 

我改了一下:

Java代码 复制代码
  1. /**实现双向绑定工具类*/  
  2.     public class BindingUtil{   
  3.            
  4.         public var watchers:ArrayCollection = new ArrayCollection();   
  5.            
  6.         /**绑定方法*/  
  7.         public function bind(   
  8.             obj1:Object,prop1:String,   
  9.             obj2:Object,prop2:String):void{   
  10.                
  11.             /**是否在改变标志,类似 数据同步机制*/  
  12.             var flag:Boolean = false;   
  13.                
  14.             var tempwatcher1:ChangeWatcher = ChangeWatcher.watch(obj1,prop1,function(event:Event):void{   
  15.                 if(!flag){   
  16.                     /**锁定对象*/  
  17.                     flag = true;   
  18.                     obj2[prop2] = obj1[prop1];   
  19.                     /**解锁对象*/  
  20.                     flag = false;   
  21.                 }   
  22.             });   
  23.                
  24.             var tempwatcher2:ChangeWatcher = ChangeWatcher.watch(obj2,prop2,function(event:Event):void{   
  25.                 if(!flag){   
  26.                     /**锁定对象*/  
  27.                     flag = true;   
  28.                     obj1[prop1] = obj2[prop2];   
  29.                     /**解锁对象*/  
  30.                     flag = false;   
  31.                 }   
  32.             });   
  33.                
  34.             this.watchers.addItem(tempwatcher1);   
  35.             this.watchers.addItem(tempwatcher2);   
  36.         }   
  37.            
  38.         /**解除绑定*/  
  39.         public function unbind():void{   
  40.             for(var i:int = 0; i<this.watchers.length; i++){   
  41.                 ChangeWatcher(this.watchers.getItemAt(i)).unwatch();   
  42.             }   
  43.         }   
  44.     }  
/**实现双向绑定工具类*/
	public class BindingUtil{
		
		public var watchers:ArrayCollection = new ArrayCollection();
		
		/**绑定方法*/
		public function bind(
			obj1:Object,prop1:String,
			obj2:Object,prop2:String):void{
			
			/**是否在改变标志,类似 数据同步机制*/
			var flag:Boolean = false;
			
			var tempwatcher1:ChangeWatcher = ChangeWatcher.watch(obj1,prop1,function(event:Event):void{
				if(!flag){
					/**锁定对象*/
					flag = true;
					obj2[prop2] = obj1[prop1];
					/**解锁对象*/
					flag = false;
				}
			});
			
			var tempwatcher2:ChangeWatcher = ChangeWatcher.watch(obj2,prop2,function(event:Event):void{
				if(!flag){
					/**锁定对象*/
					flag = true;
					obj1[prop1] = obj2[prop2];
					/**解锁对象*/
					flag = false;
				}
			});
			
			this.watchers.addItem(tempwatcher1);
			this.watchers.addItem(tempwatcher2);
		}
		
		/**解除绑定*/
		public function unbind():void{
			for(var i:int = 0; i<this.watchers.length; i++){
				ChangeWatcher(this.watchers.getItemAt(i)).unwatch();
			}
		}
	}

 

 

加入了属性,保存了所有的绑定,

 

也提供了解除绑定的方法

 

这样的好处,不言而喻吧,当你同个视图想绑定不同对象的时候,那么就派上用场了!

分享到:
评论

相关推荐

    flex数据绑定的原理

    5. **双向数据绑定**:Flex不仅支持单向数据绑定(从数据模型到UI),还支持双向数据绑定。这意味着UI组件的改变不仅能更新数据源,数据源的更新也能反映回UI。 6. **性能优化**:Flex数据绑定系统还包含了一些性能...

    FLEX数据绑定四种方式

    BindingUtils是Flex提供的一个实用工具类,可以用于动态创建绑定关系。这种方式适用于在运行时不确定绑定关系的情况。 **使用方法** 例如,可以使用`BindingUtils.setSource`和`BindingUtils.addTarget`方法来创建...

    FLEX数据绑定专题

    例如,通过使用Bindable元标签或Bindable类修饰符,可以实现输入控件(如TextInput)与数据模型间的双向绑定: ```mxml ``` 在Flex中,数据绑定是提高开发效率、简化代码的关键特性。结合Java后端,开发者可以...

    FLEX 数据绑定专题一(转)

    2. 双向数据绑定:双向数据绑定允许数据在模型和视图之间自由流动。当视图中的组件(如文本框)的值改变时,模型也会同步更新,反之亦然。 数据绑定的工作原理: 在FLEX中,数据绑定使用Observer模式实现。每个绑定...

    Flex 数据绑定

    Flex的数据绑定默认为单向,但可以通过`&lt;mx:TwoWayBinding&gt;`标签或`Binding`类的`sourceUpdateTarget`参数实现双向绑定。这样,不仅模型变更会更新视图,视图的变更也会反向更新模型。 5. 数据转换 有时,模型数据...

    flex数据绑定

    例如,`&lt;s:TextInput bindable="true" text="{myData}" /&gt;`是单向绑定,而`&lt;s:FormElement label="Name" id="nameField" data="{myData}" /&gt;`是双向绑定,因为`FormElement`会自动处理用户输入的更新。 4. 表达式与...

    自动flex和asp.net的实体类生成工具

    标题中的“自动flex和asp.net的实体类生成工具”指的是一个软件工具,它能自动连接到数据库并基于数据库中的表结构生成.NET环境下的实体类,同时也能为Flex应用程序生成对应的实体类,以便于数据的双向绑定和交互。...

    Flex4.0中文API

    5. 数据绑定:Flex 4.0的数据绑定机制得到了增强,支持双向绑定和表达式绑定,使得视图和模型之间的数据同步变得更加容易和直观。 6. MXML:MXML是一种声明式语言,常用于构建Flex用户界面。在Flex 4.0中,MXML和...

    flex例子.flex源程序

    6. **数据绑定**: Flex支持双向数据绑定,使得视图和模型之间的同步变得简单,减少手动更新的工作量。 7. **事件处理**: 通过监听和处理事件,你可以响应用户的交互,实现动态和响应式的应用程序。 8. **Services ...

    Flex 入门教学材料

    1. 数据绑定:Flex支持双向数据绑定,使得视图组件的状态能够自动反映模型数据的变化,反之亦然。 2. 事件处理:Flex中的事件模型允许你监听和响应用户操作或其他组件的事件,从而实现交互逻辑。 七、Flex与服务器...

    Adobe-Flex-简介.doc

    Flex类库是ActionScript类的集合,为开发者提供了大量的实用工具和功能,如数据访问、网络通信、图表绘制等。这些类库使得构建功能丰富的应用程序变得更加容易。 **3. Flex 优势和特色** Flex的优势在于其组件化、...

    flex2

    2. **数据绑定**: Flex2支持双向数据绑定,允许UI组件的状态与应用程序的数据模型实时同步。这简化了数据驱动的界面更新。 四、Flex2与Flash Player Flex2编译出的SWF文件依赖于Adobe Flash Player运行。那时,...

    flex4 开发文档

    4. **数据绑定**:解释如何在Flex应用中实现数据模型与视图之间的双向绑定,以便于实时更新UI。 5. **事件处理**:阐述ActionScript 3.0的事件模型,如何添加事件监听器和处理事件,以及如何发布和调度自定义事件。...

    flex3帮助文档

    2. **数据绑定**:Flex3支持双向数据绑定,使得视图层和模型层的数据同步自动化,降低了开发复杂度。 四、事件处理 1. **事件模型**:Flex3采用事件驱动的编程模型,事件监听器可以方便地处理用户交互和其他系统...

    flex的资料 api

    2. **安装版和网页版**:Flex SDK(Software Development Kit)的安装版包含了完整的编译工具和开发环境,如Flex Builder或IntelliJ IDEA插件,适合本地开发和离线工作。网页版通常指的是Flex在浏览器中的运行方式,...

    flex中文帮助手册大全

    7. **数据绑定**:Flex支持双向数据绑定,使得视图层和模型层的数据可以自动同步,减少了手动更新界面的工作。这是Flex简化开发的重要特性。 8. **事件处理**:Flex中的事件模型允许组件之间通过事件进行通信。...

    Flex常用教程及库

    在Flex中,我们可以利用`mx.binding.Binding`类实现自定义的数据绑定,或者使用`&lt;mx:Binding&gt;`标签在MXML中定义绑定。此外,`mx.events.PropertyChangeEvent`事件可用于监听属性变化,确保数据同步的正确性。 ...

    Flex4 AIP 中文说明

    4. **数据绑定增强**:Flex4的数据绑定机制得到了强化,支持双向数据绑定,使得视图和模型之间的同步变得更加简单。此外,还增加了 Bindable、Observer 和 Bindable Event 等元数据,让数据绑定更加灵活和强大。 5....

    flex 图片编辑器

    8. **数据绑定**:Flex支持双向数据绑定,这意味着UI组件的属性可以直接绑定到应用的模型数据,当数据改变时,UI会自动更新,反之亦然。这对于保持视图和模型的一致性非常有用。 9. **优化与性能**:由于图片编辑...

    Flex Resolve

    8. **Flex数据服务**:Flex提供了诸如BlazeDS和LiveCycle Data Services这样的数据服务,它们可以轻松地将Flex应用程序与后端数据库集成,支持双向数据绑定,实时数据推送等功能。 9. **安全性与优化**:在实际项目...

Global site tag (gtag.js) - Google Analytics