2013-08-22 2 views
0

누구나 2 구성 요소간에 양방향 바인딩을 수행하는 방법을 알려 줄 수 있습니까?두 구성 요소 사이의 양방향 바인딩 필요 4

나는 내가 만든있는 TabGroup을 가지고 2 개 탭 .. 각 탭 ...

첫 번째 탭의 각 구성 요소했습니다에서 Datagrid

: 일부 형태는 두 번째 탭이 있고 버튼 제출

그래서 세부 사항을 입력하고 제출 버튼을 클릭하면 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

,210
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 웨이 나에게 솔루션을 제공하십시오
+0

누구든지 내 질문에 답장 해 주시겠습니까? –

+2

귀하의 양식에 무엇이든 묶으려고하는 것이 보이지 않습니다. 그리고 당신이 이미 Dependency Injection (good)을 사용하고 있기 때문에, 그것의 근원이 모두 Singleton ([bad] (http://misko.hevery.com/2008/11/21/clean- code-talks-global-state-and-singletons /))를 사용합니다. 최상위 레벨에서 하나의 인스턴스를 만들고 사용하는 것이 어떨까요? –

답변

0

'목록의 항목을 두 번 클릭하면 업데이트'를 위해 바인딩 할 필요가 없습니다. 바인딩은 매우 밀접하게 결합되어 있습니다. 대신 두 번 클릭 한 항목 정보를 사용하여 목록의 두 번 클릭 이벤트를 수신하고 업데이트 양식을 수신해야합니다.

관련 문제