0

2つのコンポーネント間で双方向バインディングを行う方法を教えてもらえますか?

私は2つのタブを作成したTabGroupを持っています..各タブには各コンポーネントがあります...

最初のタブ:いくつかのフォームがあり、送信ボタン 2 番目のタブ:データグリッド

そのため、詳細を入力して [送信] ボタンをクリックすると、Datagrid に 1 行追加する必要があります。これを取得..

以下のコードを確認して実行し、解決策を提供してください。

メイン.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>

解決を待っています。上記のコードを実行して、双方向バインディングの解決策を提供してください

4

1 に答える 1

0

「リスト内のアイテムをダブルクリックして更新」をバインドする必要はありません。バインディングは非常に緊密に結合されています。代わりにすべきことは、リストのダブルクリック イベントをリッスンし、ダブルクリックされた項目情報でフォームを更新することです。

于 2013-08-23T16:05:41.180 に答える