Question

有谁能告诉我如何在两个组件之间进行双向绑定？

我有一个TabGroup，我在其中创建了2个标签..每个标签都有每个组件......

第一个标签：有一些表单并提交按钮 第二个标签： Datagrid

因此，当我输入一些细节并单击“提交”按钮时，应在Datagrid中添加1行。此功能正常工作，但是当我双击Datagrid中的行时，Datagrid中的行详细信息应填写在Form中我没有得到这个......

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

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>

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

Answer 1

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

2个组件flex 4之间需要双向绑定

1 个答案: