in Flex DropDownList, is there a way to bind to a property of an item in dataProvider?

I have following code.

<s:DropDownList dataProvider={_dataProvider}/>
<fx:Script>
   private var _dataProvider:ArrayCollection = new ArrayCollection([{label:"one", data:1}, {label:"two", data:2}]);
</fx:Scrip开发者_C百科t>

I want to bind the data property of the selectedItem in the DropDownList. Is there a way to do this?

---

Not sure if this another approach to the question... but I created a custom dropdownlist and binded the selectedItem to incoming changes. When the value of my desired data changes it will trigger the dropdownlist to change its selection.

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>

On the application I import the custom dropdownlist and bind the valuefield with whatever needs to be binded... in your case its 'data'. I also created an object called 'mydata' for the dropdownlist to listen to for changes. When mydata changes the list will too. I've added a button to demonstrate how the list changes.

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>

---

I'm pretty sure the answer is no, but just to be clear; I'm confused.

If your dataProvider contains objects like this:

{label:"one", data:1}

First off, this syntax will create a generic object with no customization. If none of the properties on that object are explicitly defined, none of them can implement the Bindable metadata tag, and therefore when used as the source for data binding, the target will never update.

Second off, even if you created your own non-generic object with properties being bindable, binding doesn't usually go multiple levels deep into an object's properties of an array.

The selectedItem will point to an object like are in your _dataProvider, or possibly null, based on user interaction with the dropDownList. Binding the selectedItem to a property inside the item doesn't make sense; because you'd be comparing an literal to an object and nothing would ever be selected.

I'm unclear, without looking, what happens in the DropDownList when you try to set selectedItem to an item not in your dataProvider. I imagine it resets the selection, though.

If you can expand on what exactly you're trying to accomplish we may be able to help more.

---

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

---

Yes. You can do this. It is quite simple, actually. I do it all the time:

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

With ActionScript that looks like this:

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

Every time the user selects an item in the drop down list, the _selectedItem will get set.