0

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

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

第一个选项卡：有一些表单并提交按钮 第二个选项卡： Datagrid

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

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

主.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;


    }
}

联系信息.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>

联系人列表.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路绑定的解决方案

4

1 回答 1

0

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

于 2013-08-23T16:05:41.180 回答