Flex Binding ComboBox to XML children

Question

Hi All

I am having some problems with my data binding and I hope somebody can help me.

I have created a really simple example for what I am trying to achieve, which you can see below.

    <?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" horizontalAlign="center" verticalAlign="middle" initialize="init()">

    <!-- Controller -->
    <mx:Script>
        <![CDATA[
                import mx.collections.XMLListCollection;
                import mx.binding.utils.BindingUtils;

                protected var _tally:Number = 3;

                //RAW XML
                [Bindable]protected var _model:XML = new XML("<model><option title='Option 1'/> <option title='Option 2'/> <option title='Option 3'/> </model>");

                //This should bind the children to the XMLLList BUT DOES NOT
                [Bindable]protected var _list:XMLList = new XMLList(_model.children());

                //This Binds the _list to the _collection
                [Bindable]protected var _collection:XMLListCollection = new XMLListCollection(_list);


                //ADDS NEW DATA TO MODEL
                protected function updateModel():void 
                {
                    _tally++; 
                    _model.appendChild(new XML("<option title='Option " + _tally + "'/>"))
                    trace(_model)
                }

        ]]>
    </mx:Script>

    <!-- View -->
    <mx:Panel title="Combo Binding Test" >
        <mx:ComboBox id="_combo" width="100%" labelField="@title" dataProvider="{_collection}" />
        <mx:Text id="_text" height="100" width="300" selectable="false" text="{_model}" />
        <mx:ApplicationControlBar width="100%" dock="true">
            <mx:Button label="Update Model" click="updateModel()" />
        </mx:ApplicationControlBar>
    </mx:Panel>

</mx:Application>

(I hope that has formatted ok!)

When I preview this I can see that the bindings have put the data into the correct places but when I update the XML with more data, the view does not update.

2 problems exist:

1. When I remove the 'children()' from the _list.dataProvider, the ComboBox updates using the bindings, but I need to read the children, so the bindings fail.

2. Despite the model being defined as bindable, the text NEVER updates.

Why bind to the children()?

I have created a custom component that will receive different sets of data from its parent. Within this custom component lies a ComboBox that needs to display the children of the data. If I cant bind to the children, I may have to hardcode a unique component each instance it is used.

For example, once instance of data could be:

<locations>
<option title="Hampshire"/>
<option title="Warwickshire"/>
<option title="Yorkshire"/>
</locations> 

Another could be:

<stock>
<option title="Hammer"/>
<option title="Drill"/>
<option title="Spanner"/>
</stock>

So it is important for me to bind to the children().

Is this possible and if not, does anyone know how I will get round this issue?

Any advice on this would be greatly appreciated.

Answer 1

This is where you should use getters and setters. For example:

private var _list:XMLList;

[Bindable]
public function get list() : XMLList {
  return _list;
}

public function set list(value:XMLList) : void {
  _list = value;
  // also can try list.refresh() here if this doesn't do the job
}

Then in commitProperties(or creationComplete, or whatever) do something like:

override protected function commitProperties() : void {
  super.commitProperties();
  if (_model && _model.children.length > 0) {
    list = _model.children(); // or use E4X as _model..option
  }
}