• FLEX 数据绑定专题(2)



    2009年12月21日 星期一 09:51 A.M.

    3. 绑定到函数、对象和数组

    (1)绑定函数以响应数据绑定事件

    可以把使用“不可绑定的参数”的函数作为数据绑定表达式的源。但是,必须有一种办法
    能够激活这个函数以更新数据绑定的目的属性。
    在下面的例子中,使用了[Bindable]元数据标记来指定Felx 调用isEnabled()函数以响应
    myFlagChanged 事件。当myFlag 的 setter 方法被调用时,它就发出了一个myFlagChanged 事
    件,这个事件触发任何使用isEnabled()函数作为源的数据绑定。
    <?xml version="1.0"?>

    <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

    <![CDATA[
    import flash.events.Event;
    // Define a function that gets invoked
    // in response to the myFlagChanged event.
    [Bindable(event="myFlagChanged")]
    private function isEnabled():String {
    if (myFlag)
    return 'true';
    else
    return 'false';
    }
    private var _myFlag:Boolean = false;
    // Define a setter method that dispatches the
    // myFlagChanged event to trigger the data binding.
    public function set myFlag(value:Boolean):void {
    _myFlag = value;
    dispatchEvent(new Event("myFlagChanged"));
    }
    public function get myFlag():Boolean {
    return _myFlag;
    }
    ]]>






    (2)将对象用于数据绑定
    当使用对象进行工作时,不得不考虑什么时候定义到这个对象的绑定?或者考虑什么时候
    定义一个到这个对象属性的绑定?
    绑定到对象
    当使一个对象成为数据绑定表达式的源时,数据绑定发生在这个对象被更新之时,或者这
    个对象的引用被更新之时,但不能发生在这个对象的单个(数据)域(feild)被更新之时。
    下面的范例中,创建了Object 类的子类,这个子类带有两个属性,stringProp 和intProp,
    但没有使这两个属性成为可绑定属性:
    package myComponents
    {
    // binding/myComponents/NonBindableObject.as
    // Make no class properties bindable.
    public class NonBindableObject extends Object {
    public function NonBindableObject() {
    super();
    }
    public var stringProp:String = "String property";
    public var intProp:int = 52;
    }
    }
    因为这个类的两个属性不是可绑定属性,当它们被更新时Flex 不会发出事件去触发数据绑
    定。接下来在Flex 应用中使用这个类,如下面的范例所示:
    <?xml version="1.0"?>

    <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
    creationComplete="initObj();">

    <![CDATA[
    import myComponents.NonBindableObject;
    [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:Button label="Change myObj.stringProp"
    click="myObj.stringProp = 'new string';"/>

    <mx:Button label="Change myObj.intProp"
    click="myObj.intProp = 10;"/>

    <mx:Button label="Change myObj"
    click="myObj = anotherObj;"/>

    因为没有使NonBindableObject 类的单个数据域(fields)成为可绑定属性,所以应用在
    两个Text 控件的绑定在应用启动时以及在myObj 被更新时才会被更新。在编译这个应用时,编
    译器会输出警告信息,提示数据绑定机制不能检测stringProp 和intProp 属性的变化。

    (3)绑定到对象的属性
    为了使对象的属性可绑定,要创建新的类定义,如下面的范例所示:
    package myComponents
    {
    // binding/myComponents/BindableObject.as
    // Make all class properties bindable.
    [Bindable]
    public class BindableObject extends Object {
    public function BindableObject() {
    super();
    }
    public var stringProp:String = "String property";
    public var intProp:int = 52;
    }
    }
    通过在类定义之前放置[Bindable]元数据标记,就可以使得类中所有public 变量、以及所有
    完全具备setter 及getter 的public 属性成为可绑定的属性。接下来就可以使用stringProp
    和intProp 属性作为数据绑定的源,如下范例所示:
    <?xml version="1.0"?>

    <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
    creationComplete="initObj();">

    <![CDATA[
    import myComponents.BindableObject;
    [Bindable]
    public var myObj:BindableObject = new BindableObject();
    [Bindable]
    public var anotherObj:BindableObject =
    new BindableObject();
    public function initObj():void {
    anotherObj.stringProp = 'anotherObject';
    anotherObj.intProp = 8;
    }
    ]]>






    <mx:Button label="Change myObj.stringProp"
    click="myObj.stringProp = 'new string';"/>

    <mx:Button label="Change myObj.intProp"
    click="myObj.intProp = 10;"/>

    <mx:Button label="Change myObj"
    click="myObj = anotherObj;"/>

    (4)在绑定中使用数组
    在使用数组进行工作时,比如Array 或者ArrayCollection 对象,可以把数组作为数据绑定
    表达式的源或目的。
    注意: 当使用数组作为绑定源时,应该使用ArrayCollection 类型的数组,因为
    ArrayCollection 类在数组或数组元素发生变化时能够发出事件来触发数据绑定。比如,对
    ArrayCollection.addItem(), ArrayCollection.addItemAt(),
    ArrayCollection.removeItem(), 以及ArrayCollection.removeItemAt()方法的调用都会触发
    数据绑定。
    绑定到数组
    通常将数组绑定给Flex 控件的dataProvider 属性,下面范例说明将数组绑定用于List 控
    件:
    <?xml version="1.0"?>

    <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

    <![CDATA[
    import mx.collections.ArrayCollection;
    [Bindable]
    public var myAC:ArrayCollection = new ArrayCollection([
    "One", "Two", "Three", "Four"]);
    [Bindable]
    public var myAC2:ArrayCollection = new ArrayCollection([
    "Uno", "Dos", "Tres", "Quatro"]);
    ]]>




    <mx:Button
    label="Change Element"
    click="myAC[0]='mod One'"/>

    <mx:Button
    label="Add Element"
    click="myAC.addItem('new element');"/>

    <mx:Button
    label="Remove Element 0"
    click="myAC.removeItemAt(0);"/>

    <mx:Button
    label="Change ArrayCollection"
    click="myAC=myAC2"/>

    这个例子定义了一个ArrayCollection 对象,然后将List 控件的dataProvider 属性设置
    为对这个ArrayCollection 的数据绑定。当修改ArrayCollection 对象中的元素,或者修改对
    ArrayCollection 对象的引用,都会触发数据绑定。
    绑定到数组中的元素
    可以使用数组中的单个元素作为数据绑定源,如下例所示:
    <?xml version="1.0"?>

    <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

    <![CDATA[
    import mx.collections.ArrayCollection;
    [Bindable]
    public var myAC:ArrayCollection = new ArrayCollection([
    "One", "Two", "Three", "Four"]);
    [Bindable]
    public var myAC2:ArrayCollection = new ArrayCollection([
    "Uno", "Dos", "Tres", "Quatro"]);
    ]]>





    <mx:Button id="button1"
    label="Change Element"
    click="myAC[0]='new One'"/>
    <mx:Button id="button2"
    label="Change ArrayCollection"
    click="myAC=myAC2"/>

    如果通过方括号语法[]来指定数组元素作为数据绑定表达式的源,那么数据绑定只在应用
    启动时触发,或者在数组或其引用被更新时触发。当这个数组元素被更新的时候不会触发数据
    绑定。
    但数据绑定表达式中的myAC.getItemAt(0)则会在该数组元素变化时被触发更新。因此,id
    为 text2 的Text 控件在点击button1 时会被更新,而id 为text1 的Text 控件则不会被更新。
    当使用数组中的元素作为数据绑定表示的源时,应当在绑定表达式中使用
    ArrayCollection.getItemAt()方法。

    点击button2 时将myAC2 拷贝给myAC,这会触发对数组元素的所有数据绑定而不论它们是如
    何实现的。

  • 相关阅读:
    我的java学习之路--Reflect专题
    jQuery——动态给表格添加序号
    jQuery操作表格(table)的常用方法、技巧汇总
    Jquery如何删除table里面checkbox选中的多个行
    Mybatis问题:There is no getter for property named 'unitId' in 'class java.lang.String'
    jquery 遍历表格,需要表格中每个td的内容
    用jquery怎么删除<table>的一行
    xml报错 Parse Fatal Error :在实体引用中,实体名称必须紧跟在'&'后面
    mybatis做like模糊查询
    javascript eval和JSON之间的联系
  • 原文地址:https://www.cnblogs.com/nianshi/p/1739409.html
Copyright © 2020-2023  润新知