`

flex中的数据绑定 bindable

    博客分类:
  • flex
阅读更多
一个类声明绑定,相当于给这个类里的所有属性都声明了绑定。等同于你把这个类里的所有属性都声明绑定。
那么这个类的属性如果发生了变化,则会触发绑定。

比如
[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
[Bindable]专门用来定义绑定中的数据源对象,
       [Bindable]的用法:
       1.变量前定义:使用[Bindable]后,下一行表达式定义的变量就可以被用在绑定中。
              方法一:[Bindable]
         方法二:[Bindable(event=”eventname”)]   event事件名指当数据源发生变化时,
数据源所在对象派发的事件类型,它是可选的。如果不写,默认事件名是“propertyChange”
       2.函数前定义:此函数必须通过setter和getter方式定义, [Bindable]要用在setter函数前面。
              [Bindable]   
              public function set Num(n:Number):void{
                     num=n;
              }
              public function get Num():void{
                     return num;
              }
              虽然是方法,但使用时,也是用 .  语法,即 ~ . Num。
3. 公用类前定义:当使用了绑定标签后,这个类的所有公有变量,包括setter和getter都可以用于绑定。
package tree{
        [Bindable]
        public class myTest{
              private  var num:Number=0;
               public var className:String=”aaa”; //可用数据绑定
                            public function set Num(n:Number):void{   //可用数据绑定
                                   num=n;
                            }
                            public function get Num():void{
                                return num;
                            }
        }
}
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~来自血色残阳的blog

本文来自CSDN博客,转载请标明出处:http://blog.csdn.net/gongfy/archive/2008/09/01/2862852.aspx


http://www.noupe.com/adobe/flex-developers-toolbox-free-components-themes-and-tutorials.html经典中的经典
http://www.efflex.org/EfflexExplorer.html堪称经典
http://mofeichen.iteye.com/blog/466171里面有好多特效例子
http://www.marcusschiesser.de/?p=67 3D相册,还不错
http://www.switchonthecode.com/tutorials/getting-started-with-adobe-flex-and-away3d 3D旋转-有源码
http://actionscriptnotes.com/showcase/renju/Main.html flex 开发的五子棋,效果很好
http://dougmccune.com/blog/2008/02/26/examples-from-my-360flex-session-using-open-source-community-projects/
包括:VistaFlow效果、MP3Flow等其他
http://dougmccune.com/360Flex_ATL/FlexSpyEventListeners/flex图表和datagrid切换效果


在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为用户隐藏了很多底层算法。

分享到:
评论

相关推荐

    双向数据绑定JS库Bindable.js.zip

    Bindable.js 实现了灵活、快速的双向数据绑定的 JavaScript 库。 Two-way data binding means linking properties of two separate objects - when one changes, the other will automatically update with that ...

    FLEX企业应用开发实战.part1

     2.5 Flex中的组件化编程  2.5.1 认识Flex组件和组件容器  2.5.2 组件生命周期与布局  2.5.3 组件的失效机制  2.5.4 使用ActionScript创建自定义组件  2.6 异步调用  2.6.1 异步调用导致模型数据不一致...

    FLEX企业应用开发实战.part2

     2.5 Flex中的组件化编程  2.5.1 认识Flex组件和组件容器  2.5.2 组件生命周期与布局  2.5.3 组件的失效机制  2.5.4 使用ActionScript创建自定义组件  2.6 异步调用  2.6.1 异步调用导致模型数据不一致...

    bindable-object.js:数据绑定对象

    快速数据绑定库。 双向数据绑定意味着链接两个独立对象的属性——当一个对象发生变化时,另一个将自动更新。 它使数据模型和 UI 之间的交互更加容易,以及 MVC 之外的其他用途。 例子 var BindableObject = ...

    Flex企业应用开发实战源代码

    2.4.3 可以用于数据绑定的属性 39 2.4.4 数据绑定的用途 40 2.4.5 使用Bindable元数据标记 40 2.4.6 绑定到函数、对象和数组 43 2.4.7 使用可绑定属性链进行工作 46 2.5 Flex中的组件化编程 46 2.5.1 认识Flex...

    Flex Bindable 的用法

    什么是元数据(metadata):[Bindable]大概又是Flex用得最多的元数据了。

    flex 绑定元数据

    算是flex初学者的的笔记吧,首先可以概览一下下文中的代码,然后我们主要是看看[Bindable]的这种用法。

    connected:使用getter setter事件样式更新的javascript双向数据绑定库

    Connected.js (在制品) Connected.js是我对永不轮询的双向数据绑定库的谦虚尝试。 所有更新都是通过事件发射器发生的,由属性设置器触发。 这比那里的其他一些实现更有效。演示版现在,此实现仅支持递归创建可绑定...

    flex导出excel的代码

    Alert.show("行的数据分别是:"+o.idx+"/"+o.names+"/"+o.sex); } private var sheet:Sheet; private function onCreate():void { var excelFile:ExcelFile = new ExcelFile(); sheet = new Sheet...

    bindable:使用Aurelia JS内置的设计系统,可以更快,更轻松地进行Web开发

    Bindable是一个设计系统,旨在在工具中提供视频产品,以构建紧密一致的界面。 Bindable将为设计者和工程师提供一种通用的模式。 Bindable是作为插件开发的,并使用构建。 目录 背景 我们是由设计师和工程师组成的...

    Flex调用xml通过DataGrid遍历简单示例

    [Bindable] private var slides:ArrayCollection private function resultHandler(event:ResultEvent):void { slides = event.result.album.slide; } private function faultHandler...

    binding:客户端不绑定的键绑定

    tcg绑定 ... private final Bindable&lt; KeyboardKey&gt; binds; private boolean running; Module ( BindingSystem&lt; KeyboardKey&gt; bindSys ) { this . binds = bindSys . bindableFor( this :: to

    bindable-component:公开用于绑定处理程序的可扩展的react组件

    可结合成分 公开BindableComponent以轻松绑定组件方法以用作react中的处理程序。 还提供了BaseComponent ,唯一的区别是包含了PureRenderMixin 。安装npm install --save bindable-component用法import { ...

    backbone.marionette.bindable-router:带有木偶可绑定参数的路由器

    木偶的可绑定路径参数此路由器允许您使用前导@char 绑定控制器方法以路由参数。 路由器示例: appRoutes: { 'users/@user/edit' : 'onUserEdit' , 'users/@user/copy' : 'onUserCopy' , '*default' : 'onDefault' } ...

    flex实列demo

    *" creationComplete="initTree();... change="iFrame.source=tree.selectedNode.path" /&gt; ... // TODO: determine whether we can ... // TODO: add some links here to Flex sites } ]]&gt; &lt;/mx:Application&gt;

    AngularJS基础 ng-non-bindable 指令详细介绍

    本文主要讲解AngularJS ng-non-bindable 指令,这里帮大家整理了ng-non-bindable指令的基本知识资料,有需要的小伙伴可以参考下

    flexjava交互

    [Bindable] var result:String; function sendRequest(){ var name=name1.text; var password=password1.text; ro.validateLogin(name,password); ro.addEventListener(ResultEvent.RESULT,results); } function ...

    aurelia-typed-observable-plugin:Aurelia的可观察和可绑定装饰器的增强实现。

    提供4个基本的自定义可观察对象: @observable.date , @observable.number , @observable.string , @observable.boolean ,5个@bindable以及额外的内置值: @bindable.booleanAttr @bindable 安装与提醒 npm i ...

Global site tag (gtag.js) - Google Analytics