2009-05-08 13 views
3

フレックスには新しかったので、これがばかげた質問であれば私を許してください。フレックスコンポーネント間でデータを渡す

今はカスタムイベントを使用して、あるコンポーネントから別のコンポーネントにデータを渡しています。私の問題は、イベントだけがバブルアップすることです。イベントをディスパッチするコンポーネントの親ではないコンポーネントにデータを渡すにはどうすればよいですか?

ここに基本的なレイアウトがあります。私はコンポーネント1からコンポーネント3に渡されたデータを取得しようとしています。

Application MXML 
    Component 1 
    Component 2 
      Component 3 

答えて

10

グラフ/ツリー内のすべてのコンポーネントでデータが必要な場合は、それぞれに公開可能なバインド可能なプロパティを公開することをお勧めします。子コンポーネントが親によって処理されるバブリングイベントをディスパッチさせ、バインド可能プロパティの新しい値を設定できるようにします。親から子にプロパティをバインドすると、これは他のコンポーネントに「カスケード」します。

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

あなたは追加のロジックを起動する必要がある場合は、代わりにプロパティpublic varのget/setのペアを定義し、セッターにロジックを追加することができます。

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

さらに良いことには、Flexの無効化フレームワークを使用することですパフォーマンスを最適化する:

_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フレームワークを構成するすべてのUIComponentで使用されます。要素を配置するには、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を渡すCOMPONENT2でメソッドを呼び出し、引数

  • としてMYDATAを取るCOMPONENT2でメソッドを作成し、コンポーネント1

    dispatchEvent(new CustomEvent("customEvent",myData)); 
    
  • からカスタムイベントを送出します
関連する問題