需要2个组件之间的2路绑定flex 4

Question

谁能告诉我如何在 2 个组件之间进行 2-way Binding？

我有一个 TabGroup，我在其中创建了 2 个选项卡。每个选项卡都有每个组件...

第一个标签：有一些表单并提交按钮 第二个选项卡： 数据网格

因此，当我输入一些详细信息并单击提交按钮时，应在 Datagrid 中添加 1 行。此功能有效，但是当我双击 Datagrid 中的行时，应在表单中填写来自 Datagrid 的行详细信息我没有得到这个..

请检查下面的代码，运行它，然后为我提供解决方案：

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="components.*"
               creationComplete="init()">

    <fx:Script>
        <![CDATA[
            import components.EmployeeSingleton;

            [Bindable]
            public var empSingleton: EmployeeSingleton;

            public function init(): void
            {
                empSingleton = EmployeeSingleton.getInstance();
            }


        ]]>
    </fx:Script>

    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>


    <s:VGroup>

        <s:TabBar dataProvider="{contact}" />

        <mx:ViewStack id="contact"
                      resizeToContent="true">

            <components:ContactInfo id="contactInfo"
                                    label="Employee Info" 
                                    empSingleton="{empSingleton}"/>

            <components:ContactList label="Employee List"
                                    empSingleton="{empSingleton}"/>


        </mx:ViewStack>

    </s:VGroup>

</s:Application>

EmployeeSingleton.as

package components
{
    import mx.collections.ArrayCollection;

    [Bindable]
    public final class EmployeeSingleton
    {
        private static var instance: EmployeeSingleton;
        public var empData: ArrayCollection;

        public function EmployeeSingleton()
        {
        }

        public static function getInstance(): EmployeeSingleton 
        {
            if(instance == null)
                instance = new EmployeeSingleton();

            return instance;
        }


    }
}

EmployeeVO.as

package vo
{
    [Bindable]
    public class EmployeeVO
    {
        public function EmployeeVO()
        {
        }

        public var empName: String;
        public var address: String;
        public var state: String;
        public var city: String;
        public var zip: String;


    }
}

ContactInfo.mxml

<?xml version="1.0" encoding="utf-8"?>
<s:NavigatorContent 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="400" height="300">

    <fx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;

            import vo.EmployeeVO;

            public var empSingleton: EmployeeSingleton;

            private var empVO : EmployeeVO;
            private var empCollection : ArrayCollection = new ArrayCollection();


            protected function submit_clickHandler(event:MouseEvent):void
            {
                empVO = new EmployeeVO();

                empVO.empName = empName.text;
                empVO.address = address.text;
                empVO.city = city.text;
                empVO.state = state.text;
                empVO.zip = zip.text;

                empCollection.addItem(empVO);

                empSingleton.empData = empCollection;

            }

        ]]>
    </fx:Script>

    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>

    <s:Form>

        <s:FormItem label="Name">
            <s:TextInput id="empName" />
        </s:FormItem>

        <s:FormItem label="Address">
            <s:TextInput id="address" />
        </s:FormItem>

        <s:FormItem label="City">
            <s:TextInput id="city" />
        </s:FormItem>

        <s:FormItem label="State">
            <s:TextInput id="state" />
        </s:FormItem>

        <s:FormItem label="Zip">
            <s:TextInput id="zip" />
        </s:FormItem>

        <s:FormItem>
            <s:Button id="submit"
                      label="Submit"
                      click="submit_clickHandler(event)"/>
        </s:FormItem>

    </s:Form>

</s:NavigatorContent>

ContactList.mxml

<?xml version="1.0" encoding="utf-8"?>
<s:NavigatorContent 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="400" height="300"
         >

    <fx:Script>
        <![CDATA[
            [Bindable]
            public var empSingleton: EmployeeSingleton;

        ]]>
    </fx:Script>

    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>

    <s:DataGrid id="empData"
                dataProvider="{empSingleton.empData}"/>

</s:NavigatorContent>

等待解决，请运行上面的代码并为我提供2路绑定的解决方案

Answer 1

您不需要绑定“双击列表中的项目时更新”。绑定是非常紧密耦合的。您应该做的是侦听列表上的双击事件并使用双击的项目信息更新表单。