在Flex DropDownList中,有没有办法绑定到dataProvider中项目的属性?

时间:2010-08-02 19:08:43

标签: flex data-binding

我有以下代码。

<s:DropDownList dataProvider={_dataProvider}/>
<fx:Script>
   private var _dataProvider:ArrayCollection = new ArrayCollection([{label:"one", data:1}, {label:"two", data:2}]);
</fx:Script>

我想在DropDownList中绑定selectedItem的data属性。有没有办法做到这一点?

4 个答案:

答案 0 :(得分:2)

不确定这个问题的另一种方法是否......但我创建了一个自定义下拉列表,并将selectedItem绑定到传入的更改。当我所需数据的值发生变化时,它将触发下拉列表以更改其选择。

DropDownListBindable.mxml

<?xml version="1.0" encoding="utf-8"?>
<s:DropDownList xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    xmlns:mx="library://ns.adobe.com/flex/mx">
    <fx:Script>
        <![CDATA[
            import mx.controls.Alert;
            [Bindable] public var valueField:String = "";

            override public function set selectedItem(value:*):void{
                try{
                    for(var i:uint=0;i<this.dataProvider.length;i++){
                        if(this.dataProvider[i][this.valueField]==value){   
                            this.selectedIndex=i;
                            break;                      
                        }else{
                            this.selectedIndex=-1;
                        }
                    }
                }catch(e:Error){}
            }
        ]]>
    </fx:Script>
</s:DropDownList>

在应用程序上,我导入自定义下拉列表并将值字段与任何需要绑定的内容绑定...在您的情况下是“数据”。我还为下拉列表创建了一个名为“mydata”的对象来监听更改。当mydata改变时,列表也将改变。我添加了一个按钮来演示列表的更改方式。

main.mxml

    <?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    xmlns:mx="library://ns.adobe.com/flex/mx" 
    xmlns:components="com.components.*">
    <fx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;          
            [Bindable] private var myData:Object = new Object();
            [Bindable] private var _dataProvider:ArrayCollection = new ArrayCollection([{label:"one", data:1}, {label:"two", data:2}]);

        ]]>
    </fx:Script>
    <s:HGroup>
        <components:DropDownListBindable
            dataProvider="{_dataProvider}"
            prompt="--select one--"    
            selectedItem="{this.myData}" 
            id="ddl"                 
            valueField="data"                
            labelField="label"/>
        <s:Button label="change datafield" click="this.myData=1"/>
    </s:HGroup>
</s:Application>

答案 1 :(得分:1)

我很确定答案是否定的,但要清楚;我很困惑。

如果您的dataProvider包含如下对象:

{label:"one", data:1}

首先,此语法将创建一个没有自定义的通用对象。如果没有显式定义该对象上的任何属性,则它们都不能实现Bindable元数据标记,因此当用作数据绑定的源时,目标永远不会更新。

其次,即使您创建了自己的非泛型对象,其属性是可绑定的,绑定通常也不会深入到对象的数组属性中。

根据用户与dropDownList的交互,selectedItem将指向您_dataProvider中的对象,或者可能为null。将selectedItem绑定到项目内的属性是没有意义的;因为你要将文字与对象进行比较,所以不会选择任何东西。

我不清楚,当你试图将selectedItem设置为不在dataProvider中的项目时,DropDownList中会发生什么。我想它会重置选择。

如果你可以扩展你想要实现的目标,我们可以提供更多帮助。

答案 2 :(得分:1)

<s:DropDownList id="ddl" dataProvider="{_dataProvider}"/>
<s:Label text="{ddl.selectedItem.data.toString()}"/>

答案 3 :(得分:0)

是。你可以这样做。实际上这很简单。我一直这样做:

<s:DropDownList dataProvider="{_dataProvider}" selectedItem="@{_selectedItem}" />

使用如下所示的ActionScript:

private var _dataProvider:ArrayCollection = new ArrayCollection([{label:"one", data:1}, {label:"two", data:2}]);
[Bindable] private var _selectedItem;

每次用户选择下拉列表中的项目时,_selectedItem都会设置。