Apache flex Flex：组件之间的绑定

下面是一个简化的例子

我有两个视觉组件（PersonPicker和PersonViewer），当对象（Person）发生变化时，它们需要对应

PersonViewer的setter显然不会被调用，即使该组件中person的值已更改。我之所以需要它，是因为当person的值发生变化时，我需要调用另一个函数（calculateSalary）

此函数最初被正确调用，但当更改PersonPicker中的person时，不再调用setter，这将导致工资标签保留初始值

个人类别

package
{
    [Bindable]
    public class Person
    {
        private var _name:String;

        public function Person()
        {
        }

        public function get name():String
        {
            return _name;
        }

        public function set name(value:String):void
        {
            _name = value;
        }

    }
}

主应用程序

<?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" minWidth="955" minHeight="600" xmlns:local="*"
               creationComplete="creationCompleteHandler(event)">
    <s:layout>
        <s:VerticalLayout/>
    </s:layout>
    <fx:Script>
        <![CDATA[
            import mx.binding.utils.BindingUtils;
            import mx.events.FlexEvent;

            protected function creationCompleteHandler(event:FlexEvent):void
            {
                // Bind the person property of the personPicker to the person property of the personViewer
                BindingUtils.bindProperty(personViewer, "person", personPicker, "person");

                // Create a new Person and set this as the PersonPicker's person
                var john:Person = new Person();
                john.name = "John";
                personPicker.person = john;
            }

        ]]>
    </fx:Script>
    <local:PersonPicker id="personPicker"/>
    <local:PersonViewer id="personViewer"/>
</s:Application>

在
PersonPicker
中，通过在下拉列表中选择项目，您没有设置
person
属性，您只设置其
名称

解决此问题的一种方法是这样的（您绑定到
person
属性，而不是它的
name
）：



此外，这里没有理由使用BindingUtils。只要写下：

<local:PersonPicker id="personPicker"/>
<local:PersonViewer id="personViewer" person="{personPicker.person}" />


按照我给出的示例进行了操作。在我的实际项目中，我有多个与对象对应的字段，因此直接将dropdownlist链接到对象不是一个选项。我通过不使用双向绑定（@）解决了这个问题。更改值时，我会创建一个具有正确属性的新对象，然后将其设置为组件的对象，这导致调用setter。@Pmarcoen另一种方法是在
Person
实例上侦听
PropertyChangeEvent
，而不是每次要更改属性时都创建一个新实例。每个可绑定属性在其值更改时自动分派此事件。
<?xml version="1.0" encoding="utf-8"?>
<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009" 
         xmlns:s="library://ns.adobe.com/flex/spark" 
         xmlns:mx="library://ns.adobe.com/flex/mx" width="100%" height="100">
    <fx:Script>
        <![CDATA[
            private var _person:Person;
            [Bindable]
            public function get person():Person
            {
                return _person;
            }
            public function set person(value:Person):void
            {
                trace ("set person()");

                _person = value;

                calculateSalary();
            }

            private function calculateSalary():void
            {
                trace ("calculateSalary()");
                switch (person.name)
                {
                    case "Phil":
                        salary.text = "1000";
                        break;
                    case "Bill":
                        salary.text = "1200";
                        break;
                    case "John":
                        salary.text = "1400";
                        break;
                    case "Mike":
                        salary.text = "1600";
                }
            }
        ]]>
    </fx:Script>
    <s:layout>
        <s:HorizontalLayout/>
    </s:layout>
    <s:Label text="{person.name}"/>
    <s:Label id="salary"/>
</s:Group>

<s:DropDownList selectedItem="@{person}" labelField="name">
    <mx:ArrayCollection>
        <m:Person name="Phil" />
        <m:Person name="Bill" />
        <m:Person name="John" />
        <m:Person name="Mike" />
    </mx:ArrayCollection>
</s:DropDownList>

<local:PersonPicker id="personPicker"/>
<local:PersonViewer id="personViewer" person="{personPicker.person}" />