Flex Data Binding详解

分类：Flex作者：编程之家用户

Data BindIng简单的说就是当绑定源属性发生变化时，Flex 会把绑定源变化后属性的值赋给目的物的属性。做到了数据同步。

  Data BindIng 什么时候发生：
 
  1.在绑定源属性值发生改变时发生。
  2.在绑定源发出initialize事件时绑定发生一次。
 
  让属性具有可绑定功能：
 
   一般的，只要在属性前加上
  [Bindable] 或
  [Bindable(event="eventname")]
  元标记即可
  注意：
  如果没有标出触发绑定的事件，正如[Bindable]，Flex会自动为绑定加上propertyChange事件，当源数据发生变化时，Flex将自动派发该事件，触发数据绑定。如果修改后数据和源数据“===”也就是全等，那么Flex将不会触发数据绑定。
  如果标出的触发绑定的事件，正如[Bindable(event="eventname")]，那么在源数据发生改变的时候，必须dispatch出该事件才能触发数据绑定。不论修改后数据和源数据是否全等，Flex都将会触发数据绑定，需要自己编程控制，例如：

 

 <mx:Script>
        <![CDATA[
          [Bindable(event="hhhh")]
          private var ss:String="aaa";
         
          private function doTest():void
          {
           ss="bbb";
if(ss!=="aaa") / /判断和源数据是否相等，不相等则触发绑定
 this.dispatchEvent(new Event("hhhh"));
 
 
数据绑定除了用[Bindable]标签来申明以外，也可以用<mx:Binding/>组件和ActionScript实现。

 

  用<mx:Binding/>，例如：
  <mx:binding source="text1.text" destination="text2.text"/>
  <mx:binging source="text2.text" destination="text1.text"/>
  <mx:TextInput id="text1"/>
  <mx:TextInput id="text2"/>
  source为绑定源，destination为目的源,按上面的写法，不论是text1还是text2发生变化，都会引起对方的变化。细心的你也许会想这不会引起死循环吗？答案是否定的，不会引起死循环。我想应该是Flex内部的机制已经优化了这种情况，让其只触发一次。

 

  用ActionScript来绑定：

 

  1.使用bindProperty()。

 

   bindProperty(site:Object,prop:String,host:Object,chain:Object,commitOnly:Boolean = false):ChangeWatcher，例如：
   var myc:ChangeWatcher=BindingUtils.bindProperty(text2,"text",text1,"text");
   即当text1的值发生变化时text2也跟着变，site为目的对象，prop为目的属性，host为绑定源，china为绑定源属性链——关于属性链下面再讲，commitOnly默认为False，即不管是确认事件还是未确认事件都将触发绑定，而为True时，只有确认事件才能触发绑定，这个一般用不到，和Flex自身的事件机制有关，如果为false的话，当数据改变时将触发两次绑定事件，当为True时，只触发一次，自己可以用bindSetter方法来做测试。当不想绑定时可以用myc.unwatch()方法来解除绑定。
  
  2.使用bindSetter()。

 

  bindSetter(setter:Function, chain:Object,commitOnly:Boolean = false):ChangeWatcher，例如：
  var myc:ChangeWatcher=BindingUtils.bindSetter(change,true);
  private function change(str:String):void
   {
   text2.text=str; 
   }
  change就是当绑定源发生变化时所触发的函数，其他参数都一样。

 

  3.使用ChangeWatcher.watch()。

 

  同样可以用ChangeWatcher.watch方法来监控对象属性的变化，非常有用。

 

  watch(host:Object,handler:Function,commitOnly:Boolean = false):ChangeWatcher，例如：
  var myc:ChangeWatcher=ChangeWatcher.watch(text1,change)；
  private function change(e:Event):void
   {
   text2.text=text1.text; 
   }
  这里的Event和绑定数据所定义的触发事件有关，你可以用所有事件的父类Event来表示。
 
  注意：

 

 as主要是通过mx.binding.utils.BindingUtils 这个类来实现数据绑定，用MXML和as实现数据绑定有以下几点不同：
  1.当使用AS做数据绑定时，bindProperty()或bindSetter()方法中不能使用AS代码，这和MXML是不同的， 可以用bindSetter() 方法来申明一个绑定处理函数。
  2.当使用AS做数据绑定时，同样不能使用EX4语法，也就是说不能直接使用XML解析语法了。
  3.当使用AS做数据绑定时，在属性链中不能使用任何函数和数组。
  4.MXML具有更好的错误提示和警告功能。

 

  最后来讲讲属性链。
  属性链就是bindProperty()和 bindSettet()等方法中的chain参数所表示的对象，  有时也许绑定源并不只是text1.text这样的简单形式，也可以是类似于user.name.text1.text，那么就存在一个关系链的问题，如果这条链中的某一项发生了改变，会不会触发绑定呢？答案是如果你想让其改变其中的某一项都能触发数据绑定，那么这条链的每个元素必须是可绑定的。对于上面的这种形式，可以这样使用bindProperty方法：
  bindProperty(text2,this,["user","name","text1","text"])。

          }
        ]]>   
    </mx:Script>

 

 <mx:Text text="{ss}"/>
 <mx:Button click="doTest()"/>

 

  如果没有this.dispatchEvent(new Event("hhhh"))这句，那么你点击按钮是没有设么作用的。 另外当申明自定义触发事件时，用ChangeWatcher来监控其变化，发现虽然目的源值变了，但是ChangeWatcher却监控不到变化，同样ChangeWatcher也监控不到非共有变量的变化。关于ChangeWatcher，下面会提到。
  绑定函数——Functions,对象——Object,数组——Arrays
  函数：
  你可以在{}中直接使用函数。例如：<mx:Text text="{Matn.random()*ss}"/>
  上面这个没有什么好讲的，关于函数绑定下面这个比较重要：
  <mx:Script>
        <![CDATA[
          public var ss:String="aaa";
         
          [Bindable(event="hhhh")]
          private function gg():String
          {
           return ss;
          }
         
          private function doTest():void
          {
           ss=Math.random().toString();
           this.dispatchEvent(new Event("hhhh"));
          }
        ]]>   
    </mx:Script>
   
 <mx:Text text="{gg()}"/>
 <mx:Button click="doTest()"/>

 

  这样给函数加一个[bindable]，便使函数具有绑定功能，但是如果不申明自定义触发事件，只能在组件初始化时绑定一次，点击以上按钮是没有什么作用的。大家可以自己试试。
 
  还有getter和setter函数，比较重要，给getter或setter函数加上[bindable]，用不着两个都加，加一个就可以了，例如：
 <mx:Script>
        <![CDATA[
         public var ss:String="aaa";
         
          [Bindable]
          public function get gg():String
          {
           return ss;
          }
         
          public function set gg(value:String):void
          {
           ss=value;
          }
         
          private function doTest():void
          {
           gg=Math.random().toString();
           this.dispatchEvent(new Event("hhhh"));
          }
        ]]>   
    </mx:Script>
   
 <mx:Text text="{gg}"/>
 <mx:Button click="doTest()"/>
  同样能达到绑定效果，如果只有一个getter方法，那么要想实现数据绑定，就需要申明自定义触发事件了，大家可以自己试试。

 

  对象：
  对象绑定最重要的是搞清楚怎么申明才能使其属性具有绑定功能，例如：
  申明对象 NonBindableObject 
//[bindable]  先注释掉这行，测试
public class NonBindableObject extends Object
 {
   
        public function NonBindableObject() {
  super();  
        }
       
        public var stringProp:String = "String property";

        public var intProp:int = 52;
    }

 

绑定
 <mx:Script>
        <![CDATA[
  [Bindable]
  public var myObj:NonBindableObject = new NonBindableObject();
  [Bindable]  
  public var anotherObj:NonBindableObject =
      new NonBindableObject();
  public function initObj():void {
      anotherObj.stringProp = 'anotherObject';
      anotherObj.intProp = 8;
  }      
        ]]>   
    </mx:Script>
    <mx:Text id="text1" text="{myObj.stringProp}"/>
    <mx:Text id="text2" text="{myObj.intProp}"/>
    <mx:Button label="改变 myObj.stringProp"
        click="myObj.stringProp = 'new string';"/>
       
    <mx:Button label="改变 myObj.intProp"
        click="myObj.intProp = 10;"/>
       
    <mx:Button label="Change myObj"
        click="myObj = anotherObj;"/>

 

  如果在申明对象时没有在类前加上[bindable]标签，那么该对象的所有属性是不能被绑定的，也就是说当对象属性发生变化时，不会触发绑定，所以点击前两个按钮都是没有用的，只有当该对象本身发生变化时，才能够触发绑定，正如第三个按钮的操作。
  现在取消第一行的注释，使对象属性可绑定，那么再点前两个按钮试试。只要给对象加上[Bindable]元标记，那么会使该对象的所有公有属性——public和拥有getter和setter方法的属性具有绑定功能。
  数组：
  如果把数组作为绑定对象，那么最好使用ArrayCollection对象，因为当使用ArrayCollection对象的一些API来操作数组会触发数据绑定，如：ArrayCollection.addItem(),ArrayCollection.addItemAt(),ArrayCollection.removeItem(),andArrayCollection.removeItemAt()方法，不然要直接使用Array的话，只用当Array本身发生变化时才触发数据绑定，当数组中某一属性发生变化时是不会触发数据绑定的。例如：
  <mx:Script>
        <![CDATA[
  import mx.collections.ArrayCollection;
  [Bindable]
  public var myAC:Array =["One","Two","Three","Four"];
     
  [Bindable]
  public var myAC2:Array =["One1","Two1","Three1","Four1"];
        ]]>   
    </mx:Script>
    <mx:Text id="text1" text="{myAC[0]}"/>
    <mx:Text id="text2" text="{myAC.getItemAt(0)}"/>
    <mx:Button id="button1"
        label="改变某一属性"
        click="myAC[0]='new One'"/>
    <mx:Button id="button2"
        label="改变对象"
        click="myAC=myAC2"/>
  当使用[]形式来申明数组时，必须使用ArrayCollection的API方法来实现数据绑定，所以当你点击第一个按钮时，text2发生了改变，而text1没有。
 
 
 
 
 
 数据绑定除了用[Bindable]标签来申明以外，也可以用<mx:Binding/>组件和ActionScript实现。

 

  用<mx:Binding/>，例如：
  <mx:binding source="text1.text" destination="text2.text"/>
  <mx:binging source="text2.text" destination="text1.text"/>
  <mx:TextInput id="text1"/>
  <mx:TextInput id="text2"/>
  source为绑定源，destination为目的源,按上面的写法，不论是text1还是text2发生变化，都会引起对方的变化。细心的你也许会想这不会引起死循环吗？答案是否定的，不会引起死循环。我想应该是Flex内部的机制已经优化了这种情况，让其只触发一次。

 

  用ActionScript来绑定：

 

  1.使用bindProperty()。

 

   bindProperty(site:Object,commitOnly:Boolean = false):ChangeWatcher，例如：
   var myc:ChangeWatcher=BindingUtils.bindProperty(text2,"text");
   即当text1的值发生变化时text2也跟着变，site为目的对象，prop为目的属性，host为绑定源，china为绑定源属性链——关于属性链下面再讲，commitOnly默认为False，即不管是确认事件还是未确认事件都将触发绑定，而为True时，只有确认事件才能触发绑定，这个一般用不到，和Flex自身的事件机制有关，如果为false的话，当数据改变时将触发两次绑定事件，当为True时，只触发一次，自己可以用bindSetter方法来做测试。当不想绑定时可以用myc.unwatch()方法来解除绑定。
  
  2.使用bindSetter()。

 

  bindSetter(setter:Function,commitOnly:Boolean = false):ChangeWatcher，例如：
  var myc:ChangeWatcher=BindingUtils.bindSetter(change,true);
  private function change(str:String):void
   {
   text2.text=str; 
   }
  change就是当绑定源发生变化时所触发的函数，其他参数都一样。

 

  3.使用ChangeWatcher.watch()。

 

  同样可以用ChangeWatcher.watch方法来监控对象属性的变化，非常有用。

 

  watch(host:Object,commitOnly:Boolean = false):ChangeWatcher，例如：
  var myc:ChangeWatcher=ChangeWatcher.watch(text1,change)；
  private function change(e:Event):void
   {
   text2.text=text1.text; 
   }
  这里的Event和绑定数据所定义的触发事件有关，你可以用所有事件的父类Event来表示。
 
  注意：

 

 as主要是通过mx.binding.utils.BindingUtils 这个类来实现数据绑定，用MXML和as实现数据绑定有以下几点不同：
  1.当使用AS做数据绑定时， bindProperty()或 bindSetter()方法中不能使用AS代码，这和MXML是不同的， 可以用 bindSetter() 方法来申明一个绑定处理函数。
  2.当使用AS做数据绑定时，同样不能使用EX4语法，也就是说不能直接使用XML解析语法了。
  3.当使用AS做数据绑定时，在属性链中不能使用任何函数和数组。
  4.MXML具有更好的错误提示和警告功能。

 

  最后来讲讲属性链。
  属性链就是 bindProperty()和  bindSettet()等方法中的chain参数所表示的对象，  有时也许绑定源并不只是text1.text这样的简单形式，也可以是类似于user.name.text1.text，那么就存在一个关系链的问题，如果这条链中的某一项发生了改变，会不会触发绑定呢？答案是如果你想让其改变其中的某一项都能触发数据绑定，那么这条链的每个元素必须是可绑定的。对于上面的这种形式，可以这样使用 bindProperty方法：
  bindProperty(text2,"text"])。

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。

相关推荐

css display:flex 属性
一：display:flex布局display:flex是一种布局方式。它即可以应用于容器中，也可以应用于行内元素。是W3C提出的一种新的方案，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持。Flex是FlexibleBox的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵
display:flex 布局详解2
1. flex设置元素垂直居中对齐在之前的一篇文章中记载过如何垂直居中对齐，方法有很多，但是在学习了flex布局之后，垂直居中更加容易实现HTML代码：1<divclass="demo">2<divclass="inner">3<p>这是一个测试这是一个测试这是一个测试这是一个测试这是一个测试</p>4</div
移动端开发
移动端开发知识点pc端软件和移动端apppc端软件是什么，有哪些应用。常见的例子，比如360杀毒，photoShop，VisualStudioCode等等移动端app是什么，有哪些应用。常见的例子，比如手机微信，手机qq，手机浏览器，美颜相机等等PC端与移动端的区别第一：PC考虑的是浏览器的兼容性，移动端考
grid布局笔记
最近挺忙的，准备考试，还有其他的事，没时间研究东西，快周末了，难得学点东西，grid是之前看到的，很好奇，讲的二维的布局，看起来很方便，应该很适合移动端布局，所以今天抽时间学一学，这个当是笔记了。参考的是阮老师的博客。阮一峰：CSSGrid网格布局教程http://www.ruanyifeng.com/blog/2019/03/g
盒模型
display:flex;把容器设置为弹性盒模型（设置为弹性盒模型之后，浮动，定位将不会有效果）给父元素设置的属性：（1）display：flex---把容器设置为弹性盒模型。（2）flex-direction---设置弹性盒模型主轴方向默认情况下主
javascript – Flex禁用Safari键盘快捷键
我在网页上运行了一个Flex应用程序,我想使用Command←组合键在应用程序中触发某些操作.这在大多数浏览器上都很好,但在Safari上,浏览器拦截此键盘事件并导致浏览器“返回”事件.有没有办法,通过Flex或通过页面上的其他地方的JavaScript,我可以告诉Safari不要这样做？解决方法:简短的
flex布局，flex-item
flex布局，flex-item1<template>2<viewclass="container">3<viewclass="greentxt">4A5</view>6<viewclass="redtxt">7B8<
c# – 大屏幕多点触控交互式应用程序设计
我应该设计一个大型多点触控屏幕的应用程序.从大到大,我的意思是新闻广播员(大约55英寸及以上).该应用程序是一个交互式地图.我的问题是：开发应用程序的技术.我的第一个想法是在AdobeFlex中制作,但是HTML5也是如此……必须有一些非常棒的Java库用于触摸交互,但是在Windows平台上
左图有文字的一些CSS样式
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><metahttp-equiv="X-UA-Compatible&quo
弹性盒模型：flex多行多列两端对齐，列不满左对齐
【1】需求：  【2】解决方案：最近遇到布局上要求item两端对齐，且最后一行在列不满的情况下要求左对齐，使用flex的justify-content:space-between;实现时发现最后一行不能左对齐，而是两端对齐方式。 不是项目上想要的效果#网上查了一些资料，有两种方法可以实现效果：**1.
AS3无法从Java发送的套接字解​​码AMF3对象
我有一个java套接字服务器,它在连接时将Animal对象发送到Flash客户端.对象发送方式如下：Amf3Outputamf3Output=newAmf3Output(SerializationContext.getSerializationContext());amf3Output.setOutputStream(userSocket.getOutputStream());amf3Output.writeObject(animal)
java – 在JBoss上使用Flex / BlazeDS的Client.Error.MessageSend问题
我正在开发一个Flex3.4应用程序,它通过最新版本的BlazeDS与JBoss-4.2.2服务器上运行的JavaEE后端进行交互.当我在Tomcat上从FlashBuilder4beta2运行Flex应用程序时,一切都很好,Flex应用程序能够进行所需的远程调用.但我的生产环境是在JBoss上,当我将应用程序移动到JBoss时(更
java – NetConnection.Call.Failed偶尔在Flex3 / Tomcat / BlazeDS / Spring中发生
我有一个非常大的问题.我使用Flex3/Tomcat/BlazeDS/Spring编写了一个大型应用程序,在本地开发时运行良好,当我部署到公共开发环境时很好,但是当部署到我们的测试环境时经常失败.当远程处理请求花费大量时间(超过20秒)时,故障似乎最常发生.在我的开发服务器上,错误发生,但仅
HTML5的Day1
弹性和布局display:flex在ie6,ie7不兼容状态，一般在pc用的比较少,在手机端所有的浏览器都是支持的控制子元素在父元素里面的位置关系display:flex是给父元素加的文档流是按照主轴排列，只要父元素加了flex,那么里面的子元素全部可以直接添加宽高主轴的方向
FLEX源码分析
FLEX2.0源码分析（一）https://www.jianshu.com/p/8bc4c5f4b19fFLEX源码分析二（网络监测swizzle）https://www.jianshu.com/p/ffb95f2cbda6FLEX源码分析三（网络监测记录FLEXNetworkRecorder）https://www.jianshu.com/p/66267dc922c5FLEX源码分析四（Systemlog）https://www.jianshu.
页面伸缩布局实例
1<!DOCTYPEhtml>2<htmllang="en">3<head>4<metacharset="UTF-8">5<title><itle>6<style>7*{8margin:0;9padding:0;10
弹性盒子圣杯布局
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><metahttp-equiv="X-UA-Compatible&qu
flex与inline-flex
flex：将对象作为弹性伸缩盒显示inline-flex：将对象作为内联块级弹性伸缩盒显示两者都是使子元素们弹性布局，但是如果是flex，父元素的尺寸不由子元素尺寸动态调整，不设置时默认是100%，而inline-flex则会使父元素尺寸跟随子元素们的尺寸动态调整。
css实现手机端导航栏左右滑动
<html><head><metacharset="utf-8"><metaname="viewport"content="width=device-width"><title>test<itle><stylemedia="screen">.tab-head{list-style-type:no
php – 查找位于指定距离之间的用户(使用用户的邮政编码)
有没有办法使用邮政编码找到径向距离？我的任务是搜索居住在指定距离内的所有用户.我知道用户的zipcodes.例如,距离当前位置25英里的用户.我有其他搜索类别,我正在使用mysql查询.我无法解决距离问题.我的后端是在PHP中Flex的前端和前端.对我来说最好的选择就是www.zip-codes.com
pythonJavaScriptjavaHTMLPHPreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-boot