2009-05-08 8 views
3

신축성이 뛰어났습니다. 이것이 바보 같은 질문 인 경우 용서하십시오.플렉스 구성 요소간에 데이터 전달

지금은 맞춤 이벤트를 사용하여 한 구성 요소에서 다른 구성 요소로 데이터를 전달하고 있습니다. 내 문제는 그 사건들이 단지 거품을 일으키라는 것이다. 어떻게하면 이벤트를 전달하는 구성 요소의 부모가 아닌 구성 요소로 데이터를 전달할 수 있습니까?

다음은 기본 레이아웃입니다. 구성 요소 1의 데이터를 구성 요소 3에 전달하려고합니다.

Application MXML 
    Component 1 
    Component 2 
      Component 3 

답변

10

그래프/트리의 모든 구성 요소에서 데이터 조각이 필요한 경우 가장 좋은 방법은 각각의 공용 바인딩 가능 속성을 노출하는 것입니다. 자식 구성 요소가 부모에 의해 처리되는 버블 링 이벤트를 전달하도록 허용하고 바인드 가능 속성의 새 값을 설정할 수 있습니다. 부모에서 자식으로 프로퍼티를 바인딩하면 다른 컴포넌트로 "캐스케이드"됩니다. 추가 로직을 호출해야하는 경우

<!-- in root application --> 
<Component1 myData="{myData}"/> 

대신 공공 VAR의 GET/set 쌍을 정의하고 세터에 논리를 추가 할 수 있습니다 더 나은

[Bindable] private var _myData; 
public function set myData(value:Object):void 
{ 
    _myData = value; 
    doSomeLogic(); 
} 

플렉스의 무효화 프레임 워크를 사용하는 것 성능을 최적화하려면

_myDataChanged : Boolean = false; 
[Bindable] private var _myData; 
public function set myData(value:Object):void 
{ 
    if (_myData != value) { 
     _myData = value; 
     _myDataChanged = true; 
    } 
    invalidateProperties(); 
} 

override protected function commitProperties() : void { 
    super.commitProperties(); 
    if (_myDataChanged) { 
     _myDataChanged = false; 
     doSomeLogic() 
    } 
} 

이 패턴은 Flex 프레임 워크를 구성하는 모든 UIComponents의 모든 곳에서 사용됩니다. 요소를 배치하려면 updateDisplayList (...)를 재정의해야 할 수도 있습니다.

+0

아, 그게 내가 필요로하는 해결책이다. 나는 또한 그 무효화 틀을 좋아한다. – KevMo

2

가장 쉬운 방법은 다른 구성 요소에 액세스하는 것입니다.

<Component1 name="component1/> 

<Component2 name="component2" onClick="onClickHandler()"/> 

private function onClickHandler(event:MouseEvent):void 
{ 
    component1.property1 = "Random data"; 
    component1.sendData("Random Data"); 
} 

당신은 컴포넌트 1에 바인딩 공공 속성을 설정

, 그것은 당신이뿐만 아니라 처리 할 수있는 PropertyChangedEvent을 올릴 것이다.

여기에는 많은 옵션이 있습니다. 수행하려는 작업의 컨텍스트에서 어느 것이 가장 적합한 지 확인하십시오.

EDIT : 내가하려는 것, component2에서 component3에 액세스하려고 시도하고 있지만 component3을 component1에서 쉽게 볼 수 없습니까? 그래도 구성 요소 2를 통해 액세스 할 수 있어야합니다. 구성 요소는 공용 멤버 인 경향이 있습니다.

private function component1OnClickHandler(event:MouseEvent):void 
{ 
    component2.component3.property1 = "Random data"; 
} 

희망이 있습니다.

+0

나를 위해 효과가있는 것으로 보입니다. 구성 요소 1 내부의 구성 요소에서 짝을 보내고 응용 프로그램 MXML에서 해당 구성 요소를 잡아낸 다음 구성 요소 3에 데이터를 설정하면 안 좋은 생각입니까? 그것은 작동하지만, 일을하는 가장 좋은 방법처럼 보이지 않습니다. – KevMo

+0

데이터를 바인딩하는 것처럼 신경 쓰지 마라. – KevMo

0

최근이 문제가 발생했습니다. 그럼 누군가가 5 년 뒤 라인을 필요로하는 경우이를 극복하는 방법은 다음과 같습니다.

link은 문제를 해결합니다.


  • 은 (here를 같이) 그 클래스의 멤버로 전달하는 데 필요한 데이터를 사용자 정의 이벤트 클래스를 만듭니다.
  • 는 부모 구성 요소에서의 EventListener를 추가하고 event.myData을 통과 컴포넌트 2의 메소드를 호출 인수로 MYDATA 소요 컴포넌트 2의 방법을 만들기
    dispatchEvent(new CustomEvent("customEvent",myData)); 
    
  • 컴포넌트 1

    에서 사용자 정의 이벤트를 전달
관련 문제