Tripping Over my Own Data Bindings

I just learned about a little “gotcha” in Flex, and I’m writing to warn you about it. A counterintuitive behavior involving Flex data bindings. And of course it’s just my luck to run into this kind of thing when I’m in the middle of trying to learn Cairngorm, (which so far is the greatest feat that I have attempted as a Flex developer).

So here’s the hitch: I have an mxml component. (It’s part of the View layer in the MVC pattern.) It has data bindings to the ModelLocator singleton (the central repository of application data). One of the data bindings needs to invoke a setter so that custom code can be run to react to the data model change. Specifically, here’s the code that I’m talking about:

    <mx:Binding
        source="model.isStreamConnected"
        destination="isStreamConnected"
    />

    <mx:Script>
        <![CDATA[
            private function set isStreamConnected(inConnected:Boolean):void
            {

               ...

            }
        ]]>
    </mx:Script>

Next, I want to bind the same data to the ‘enabled’ attribute of my media controls container, so that the controls will be disabled when it’s not connected, and enabled when the stream is connected. So I include this:

    <mx:Canvas
        styleName="MediaControls"
        enabled="{model.isStreamConnected}"
        >

        ...

    </mx:Canvas>

Although this seems like a perfectly reasonable way to use data binding, the problem I encountered is that even after the stream was connected, the canvas remained disabled.