`
ddoudd
  • 浏览: 4926 次
  • 性别: Icon_minigender_1
  • 来自: 天津
最近访客 更多访客>>
社区版块
存档分类
最新评论

【转帖】Flex中[Bindable]的使用心得

    博客分类:
  • Flex
 
阅读更多
在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中无效。
分享到:
评论

相关推荐

    Flex Bindable 的用法

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

    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 异步调用导致模型数据不一致...

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

    10.2 在Flex中使用Flash CS所开发的控件 306 10.3 Flex访问.Net 308 10.3.1 Fluorine的安装和配置 309 10.3.2 Flex通过Fluorine访问.NET 311 10.4 小结 314 附录 Flex Builder 3中的项目如何迁移至Flash ...

    flex导出excel的代码

    [Bindable] private var dp:Array = [ {idx:1, names: "test1", sex: "b" }, {idx:2, names: "test2", sex: "g" } ]; public function doSelect(o:Object):void { Alert.show("行的数据分别是...

    双向数据绑定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调用xml通过DataGrid遍历简单示例

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

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

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

    flex 绑定元数据

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

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

    AngularJS ng-non-bindable 指令 AngularJS 实例 以下段落不需要使用 AngularJS 来编译: &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset=utf-8&gt; [removed][removed] &lt;/head&gt; &lt;body...

    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;

    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 ...

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

    var BindableObject = require ( "bindable-object" ) ; var person = new BindableObject ( { name : "craig" , last : "condon" , location : { city : "San Francisco" } } ) ; person . bind ( "location....

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

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

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

    提供使用流利的语法创建自定义@observable功能: @observable.custom / @observable.custom() 提供4个基本的自定义可观察对象: @observable.date , @observable.number , @observable.string , @observable....

    open flash chart 2 swc包

    open flash chart 2 的swc文件包 可以在flex里面调用了. [Bindable] private var chart:String='{ "elements": [ { "type": "bar","alpha":0.8,"colour":"#663366", "values": [ 0 ] } ], "title": { "text": "...

    WaitingPage:带有内置指示器的 Xamarin.Forms 页面设计

    ##ShowLoadingFrame (bool, bindable) true将等待指示器包装在一个框架中。 false仅显示等待指示器本身。 ##ShowLoadingMessage (bool, bindable) true显示消息和等待指示器, false仅显示等待指示器本身。 ##...

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

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

Global site tag (gtag.js) - Google Analytics