flex中的数据绑定 bindable

一个类声明绑定,相当于给这个类里的所有属性都声明了绑定。等同于你把这个类里的所有属性都声明绑定。 
那么这个类的属性如果发生了变化,则会触发绑定。 

比如 
[Bindable] 
public ClassA{ 
    //这里用static是为了调用方便,非static是一样的 
    public static var data:Object 

如果在外面引用,比如<mx:Label text="{ClassA.data}" /> 
当data属性改变后,这个label是可以变化的。 

但是有个细节要注意到,绑定之所以会被触发,是因为被绑定的对象的引用变化了,如果引用没有改变则不会触发绑定。详细举例来说明 

刚才说到。ClassA.data其实也被声明了绑定,如果我们这么写 
ClassA.data="Test Binding"是会触发绑定的, 
因为,data属性从null变为了一个string 

如果我们在定义data时,他不是一个基础类型(as里,基础数据类型是String,int,uint,Number),是一个封装类型时(XML,Object,Array。。。),我们就要考虑到在封装类型内部是否实现了抛出绑定。什么意思呢 

如果这个data属性被定义为某个 不为null 的封装类,比如是一个Array 
public static var data:object = [ {name:'user1'}, {name:'user2'} ]; 

如果我们在组件中这样引用 
<datagrid dataprovider="{ClassA.data}"> ...<column datafield="name" /> 

当我们在代码中这样改变data时 
ClassA.data[0].name="change!" 

结果是:没有发生改变?为什么呢? 

刚刚说到了,绑定是检测声明了绑定对象(或属性)的引用是否改变,实际上,我们声明只到达data这个属性(对象)为止,至于里面的每个元素的每个属性我们并没有绑定,如果这些发生了改变,绑定是不会触发的。 

这点,即使不是对类进行绑定,直接绑定其他变量时也是相同遵守的。 

因此,很多人使用bindable去绑定结果集的时候,对结果集的操作不会影响到引用的控件, 
有种避免的办法就是对所有自定义类型对象都声明绑定,比如这个data属性,可以定义为User类,并对这个User类声明绑定。 
这样只要单个对象有绑定,那么就不会存在这个问题,但是这样也带来不少麻烦,定义如此多的VO,也会很繁琐。 
特别是如果不是使用的ro,而是用的httpservice之类的请求,返回结果都是xml、xmllist等对象的情况下,这个办法就不是很好用了。因为必须转换到自定义的集合中去。 

因此绑定也并非是万能的,某些时候还是需要手动的去处理一下。 

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~以上来自RIACHINA


在Flex编程中,Bindble使用到最多的元数据。该标签可以应用在变量或者类或者方法上。同在在MXML中使用”{}”引用设置为Bindable的变量,从而实现对于变量赋值与界面元素的自动同步。 
Bindable的实现采用了GoF的Observer模式,或者Publisher/Subscriber模式。该实现允许一个类(或者变量)可以将自身的变化自动通知给感兴趣的对象。 
对应Observer模式,GoF的说法是: 
定义对象间的一种一对多的依赖关系,当一个对象状态发生改变的时候,所有依赖于他的对象都得到通知并被自动更新。这种交互也成为发布-订阅。目标是通知的发布者。他发布通知是不需要知道谁是他的订阅者(观察者)。可以有任意数目的观察着订阅并接受通知。 
在ActionScript中,编译器将会为该标签给特定的属性或类或者方法的变化增加事件关联。 
简单的例子,如果定义了变量和一个组件: 
[Bindable] var displayName :String; 
<mx:TextInput id= "textA" text="{dispayName}"/>,编译器在后台自动增加事件对应伪代码如下: 
function set DispayName(newvar :String) :void 

    displayName= newvar; 
    this.dispatchEvent(new Event("_dispayNameChanged")); 

// 类型初始化时被调用 
function MxmlInit(){    textA.addEventListener("_dispayNameChanged")) , UpdateDisplay); 


function UpdateDisplay(){ 
    textA.text = displayName; 
}可见,编译器在背后做了大量的工作,为我们节省了很多的重复劳动来建立这种观察关系。 
对于初学Flex的人,对于bindable的误解往往是认为Bindable是双向的数值链接,事实上Observer模式对应的一个要素就是被观察者对观察者一无所知。 
比如上面的例子,对于textA的修改,其值并不会自动的体现在displayName上。Bindable只是建立单项的观察者的关系,这一点至关重要。 
对应MVC架构中,被观察者往往对应Model(数据模型?)的角色,而观察者则对应于View(视图)的角色,事实上很多的MVC架构也是非常依赖于Bindable这个工具。 
那么什么情况下应该应用Bindable?Leaf的个人经验和理解是: 
在不知道有哪些观察者,或者需要动态的增加观察者的时候,才需要是用Observer模式! 
当观察者不需要彼此之间的知识的时候。 
当被观察者对观察者的信息不关心的时候。 
当仅仅是简单的界面数值映射关系的时候。 
注意Bindable是有额外的开销的,别忘了那些编译器自动生成的代码,如果需要复杂的逻辑(并非简单的数值赋值)对应的时候,不要使用bindable。 
其实也是因为这一点,ActionScript中,即使指定了Bindable,如果对应的set或者get中逻辑比较复杂,则不会自动的创建事件关联操作,而是忽略Bindable标签。 
可以自己使用Bindable[事件名称]的方式建立关联,Adobe给出了这样的例子: 
private var _maxFontSize:Number = 15; 
[Bindable(event="maxFontSizeChanged")] 
// Define public getter method. 
public function get maxFontSize():Number 

    return _maxFontSize; 


// Define public setter method. 
public function set maxFontSize(value:Number):void 

    if (value <= 30) { 
        _maxFontSize = value; 
    } 
    else 
    { 
         _maxFontSize = 30; 
    } 
    // Create event object. 
    var eventObj:Event = new Event("maxFontSizeChanged"); 
    dispatchEvent(eventObj); 
}注意在这个例子里,复杂的逻辑是在setter里面做的,而不是getter,为什么? 因为setter调用的次数在正常的情况下总是要比getter少,原则上, 
复杂的逻辑通常在赋值时完成,用空间换时间,而不是在每一次取值时计算。 
特别信息: 
在Flex4里面,新增加了允许对于表达式的观察! 例如: 
<mx:Button enabled="{state == 'ready'}"/>同样的代码在Flex3中无效。 






[Bindable]大概又是Flex用得最多的元数据了。刚开始用用确实好简单,效率真是没的说。不过这几天用着却碰到了些问题,我自己搜集了些资料,想着有必要在blog里总结一下吧。 

啥是元数据(metadata) 
知道就跳过吧。今天不晓得为什么livedoc.adobe.com这么慢,没办法,拿不到权威的解释了。我就按自己的理解随便解释一下:首先要明白元数据不是语法的一部分,而是专门给编译器用的,说白了是告诉编译器做某些事情,学过java之类的应该知道。那Bindable来讲,它的作用是告诉flex编译器,给某些某些东西建立绑定关系,flex编译器会在编译过程中给AS(flex编译器就是把mxml编译成as,再编译到swf,也可能直接编译倒swf,我这里假设有as这么个环节)加一点事件发生和处理之类的代码,由此绑定的关系便建立了,如果我们用纯粹as3代码来写也是可以实现的,就是太太太麻烦。 

啥是绑定 
知道继续跳过。举个例子:给下面的public变量加上[Bindable] 

[Bindable] 
public var name:String = ""; 
作为一个public变量,肯定既可以被赋值,也能赋值给别的变量。绑定的作用就是,当name改变的时候(被赋值了),可能通知其它被name影响(赋值给它们)的变量发生改变。这里的“可能”就需要编译器来判断,这就是为什么元数据是给编译器用的原因了。在mxml里用{}的语法的地方就是绑定的对象,比如label={xxx.name},当name变化,label也跟着变化。这样,我们只是很简单的改变了name的值,由于有绑定,界面上的label也跟着自动变化了,爽吧。 

能用在哪里 
三个地方:类, 变量, getter/setter。是不是public没有关系,private的就只能给自家用呗。用在Class上就是简单的给所有的public属性(包括变量,getter/setter,普通方法)加上[Bindable],可是一般的方法不能用[Bindable]呀,于是一般就能看到flex给了个warning,直接无视:)。变量嘛就是上面讲的,很简单略掉。 

用在只读,只写属性(getter/setter)上面 
终于讲到关键地方了,因为getter和setter很像方法,用起来会有点不同。看看这个例子: 

[Bindable] 
private var content:Array = new Array(); 
[Bindable] 
public function set _content(ct:String):void 

       content = ct.split(SEP); 

[Bindable]              
public function get _wholeText():String 

       if(content.length == 0) 
       { 
              return &quot;&quot;; 
       } 
       else 
       { 
              var _w:String = &quot;&quot;; 
              for(var i:int=0 ; i&lt;content.length ; i++) 
              { 
                     _w += content[i] + &quot;\r\n&quot;; 
              } 
              return _w; 
       } 

原来的设想是content绑定_wholeText,可它是不工作的。为什么?_wholeText太复杂了,被编译器排除在“可能”之外,编译器认为没有绑定关系,如果只是简单的return content,倒是可以的。我这里搜到了一些比较权威的解释。来自http://www.rubenswieringa.com/blog/binding-read-only-accessors-in-flex找到Ely Greenfield讲的。 

Now keep in mind that there’s no way for the compiler to actually tell if the value of a property get function would be different if called, short of doing an extensive code flow analysis of the get function, identifying all the inputs that might be affecting the value of the get function (i.e., member fields, statics, globals that are used in the get function and in any methods, global functions, closures, etc) it might call, and setting up watchers on every one of those to trigger the binding when any of them change. That’s prohibitively difficult, and expensive to do. So the compiler doesn’t try. 

Instead when you put [Bindable] on a get/set property, the compiler makes it bindable with a little creative rewriting that allows the framework to watch the get function, and dispatch a change event when the get function is triggered. This means that automatic bindable properties don’t work when the get function is computed from multiple values, or when you change its value by setting a backing field, rather than using the set function. 

It _also_ means that if you have no set function, we can pretty much guarantee that there’s no way automatically bindable get properties will be triggered. a read only propeerty is, to the compiler, completely opaque…at the moment, it has no idea where that value is coming from, and hence will never be able to ‘automatically’ trigger the binding. 

说白了就是为了降低复杂度和提高效率,复杂情况的getter会被忽略。如何解决?可以手动建立绑定,即[Bindable("eventName")]。把代码改成这样: 

[Bindable] 
private var content:Array = new Array(); 
[Bindable] 
public function set _content(ct:String):void 

       content = ct.split(SEP); 
        this.dispatchEvent(new Event(&quot;_contectChanged&quot;)); 

[Bindable(&quot;_contectChanged&quot;)]              
public function get _wholeText():String 

       if(content.length == 0) 
       { 
              return &quot;&quot;; 
       } 
       else 
       { 
              var _w:String = &quot;&quot;; 
              for(var i:int=0 ; i&lt;content.length ; i++) 
              { 
                     _w += content[i] + &quot;\r\n&quot;; 
              } 
              return _w; 
       } 

这样就避免了编译器去自动识别。自己加上绑定关系,当_content被赋值,发出_contentChanged事件,通知所有被绑定的getter方法执行一遍。这也说明了,绑定不过是事件游戏而已,flex为用户隐藏了很多底层算法。 

阅读更多
个人分类: flex
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭
关闭