`
xiao_feng68
  • 浏览: 101342 次
  • 性别: Icon_minigender_1
  • 来自: 济南
社区版块
存档分类
最新评论

(XF - 2)Flex中Bindable的原理

    博客分类:
  • Flex
阅读更多
[Bindable]:元数据标签,它在代码中的作用就是向编译器提供如何编译程序的信息。它的最大作用是使程序组件间的数据同步变得容易。在开发中通常用上Bindable作用在视图控件上,如给它绑定一个对象,则以后只需要在逻辑层更改这个对象的值,则视图层的控件数据会自动更新(同步),而不再需要手动去更新视图。

现在来探索一下Bindable的工作原理:

先来实现一个简单的绑定例子:

    <mx:Script>
        <![CDATA[

          [Bindable]
          private var bind_String:String="hi";
         
          private function onChange():void
          {
               bind_String = "hello";

          }
        ]]>   
    </mx:Script> 
   
    <mx:Text text="{bind_String}">
    <mx:Button click="onChange()">

单击按钮则改变了text的文字,这个就是bindable。那么它是怎样工作的呢?以下是flex编译器处理后的代码:

          [Bindable(event="propertyChange")]
          private var bind_String:String="hi";
         
          private function onChange():void
          {
               var oldValue:String = bind_String;
               bind_String = "hello";
              if(bind_String!==oldValue) {
                  this.dispatchEvent(PropertyChangeEvent.createUpdateEvent(this,
                  "bind_String", oldValue, bind_String));
              }
          }

由上面可以看到数据源更改的时候抛出了一个PropertyChangeEvent事件,通知事件侦听器该数据源发生了变化,并更新视图。

“这也说明了,绑定不过是事件游戏而已,flex为用户隐藏了很多底层算法。”这句概括说明了Bindable的原理。
分享到:
评论

相关推荐

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

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

    Flex Bindable 的用法

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

    FLEX企业应用开发实战.part2

    第2章 Flex企业应用开发基础  2.1 MXML语言  2.1.1 用MXML表示ActionScript对象  2.1.2 查看由MXML文件所翻译的ActionScript代码  2.1.3 IMXMLObject接口  2.2 客户端保持状态  2.3 客户端MVC  2.4 ...

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

    本书对Flex的基础知识着墨不多,所有内容都围绕Flex+Java这一企业级应用开发技术展开,侧重于对Flex技术原理、企业级应用的架构思想和实现方法的讲解,所以书中的内容不会随着Flex版本的升级而过时。 第1章 Flex...

    FLEX企业应用开发实战.part1

    第2章 Flex企业应用开发基础  2.1 MXML语言  2.1.1 用MXML表示ActionScript对象  2.1.2 查看由MXML文件所翻译的ActionScript代码  2.1.3 IMXMLObject接口  2.2 客户端保持状态  2.3 客户端MVC  2.4 ...

    双向数据绑定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导出excel的代码

    {idx:2, names: "test2", sex: "g" } ]; public function doSelect(o:Object):void { Alert.show("行的数据分别是:"+o.idx+"/"+o.names+"/"+o.sex); } private var sheet:Sheet; private ...

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

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

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

    安装npm install --save bindable-component用法import { BindableComponent } from 'bindable-component' ;// Aternatively// import { BaseComponent } from 'bindable-component';class MyComponent extends ...

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

    可绑定 Bindable是一个设计系统,旨在在工具中提供视频产品,以构建紧密一致的界面。 Bindable将为设计者和工程师提供一种通用的模式。 Bindable是作为插件开发的,并使用构建。...npm install @bindable-ui/bindable

    open flash chart 2 swc包

    open flash chart 2 的swc文件包 可以在flex里面调用了. [Bindable] private var chart:String='{ "elements": [ { "type": "bar","alpha":0.8,...http://teethgrinder.co.uk/open-flash-chart-2/json-format.php

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

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

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

    flex 绑定元数据

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

    flex实列demo

    &lt;?xml version="1.0" encoding="utf-8"?&gt; *" creationComplete="initTree();... change="iFrame.source=tree.selectedNode.path" ... // TODO: add some links here to Flex sites } ]]&gt; &lt;/mx:Application&gt;

    c3p0-0.9.1.2源码和JAR包

    based) JDBC drivers with JNDI-bindable DataSources, including DataSources that implement Connection and Statement Pooling, as described by the jdbc3 spec and jdbc2 std extension.

    Unity对话系统源码

    VIDE is a lightweight dialogue system and interface designed to be bindable to any UI system. You are in control of the dialogues you create. Key features: - Add sprites, audios, text, tags, and ...

    Debugging with GDB --2002年5.11

    s Deviations from standard Modula-2 s Modula-2 type and range checks s The scope operators :: and . s GDB and Modula-2 s Chill s How modes are displayed s Locations and their accesses s Values and ...

Global site tag (gtag.js) - Google Analytics