Impossible de lier à la propriété du composant personnalisé

Question

Impossible de lier les données à partir d'un composant personnalisé. J'ai essayé BindUtilis et {} mais je n'arrive pas à le comprendre. Voici ce que j'ai:

J'ai un DataModel de classe qui a été fait bindable

Au sein Mainn.mxml J'ai deux composants: DataGrid (utilisé pour les tests) & CustomComponent (qui étend Canvas)

Lorsque les données dans DataModel.somelist sont mises à jour, le DataGrid reflète les modifications, mais le CustomComponent n'apparaît pas.

Je m'attendais à voir le trace (CustomComponent.dataProvider) déclenché chaque fois que this._dataModel.itemList est modifié. Qu'est-ce que je fais mal?

Main.mxml ressemble à ceci:

<mx:Script> 
<![CDATA[ 
    import model.DataModel; 

    [Bindable] 
    private var _dataModel:DataModel = DataModel.getInstance(); 

]]> 
</mx:Script> 

<mx:VBox width="100%" height="100%"> 
    <views:ItemDisplayList width="100%" height="300" id="idl" > 
     <views:dataProvider> 
      {this._dataModel.itemList} 
     </views:dataProvider> 
    </views:ItemDisplayList> 

    <mx:DataGrid id="dg" width="100%" height="300" > 
     <mx:dataProvider> 
      {this._dataModel.itemList} 
     </mx:dataProvider> 
    </mx:DataGrid> 
</mx:VBox> 

Le CustomComponent a cette classe AS:

package code{ 

import model.DataModel; 
import mx.containers.Canvas; 

public class CustomComponent extends Canvas{ 

    [Bindable] 
    private var _dataModel:DataModel = DataModel.getInstance(); 

    private var _dataProvider:ArrayCollection ; 

    public function CustomComponent(){ 
     super(); 
     _dataProvider = new ArrayCollection(); 
     trace("CustomComponent start"); 
    } 

    public function get dataProvider() : ArrayCollection { 
     trace("get dataProvider"); 
     return _dataProvider; 
    } 

    public function set dataProvider(value: ArrayCollection) : void { 
     trace("set dataProvider"); 
     this._dataProvider = value; 
     invalidateProperties(); 
     invalidateSize(); 
     invalidateDisplayList(); 
     dispatchEvent(new FlexEvent(FlexEvent.DATA_CHANGE)); 
    } 

    ... 


    override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number) : void{ 
     trace("updateDisplayList");  
     super.updateDisplayList(unscaledWidth, unscaledHeight);   
    } 
} 
} 

Answer 1

Êtes-vous réinitialiser le dataProvider dans votre composant personnalisé, ou en mettant à jour que vous voulez dire l'ajout/supprimer un élément de dataModel.itemList?

Si vous ajoutez un élément à dataModel.itemList, votre composant personnalisé ne sera pas mis à jour mais le DataGrid le sera. Cela est dû au fait que dans le DataGrid (peut-être dans le composant ListBase de base dans Flex?), Lorsque vous set dataProvider, il ajoute un écouteur d'événements pour CollectionEvent.COLLECTION_CHANGE. Quand il entend cela (quand quelque chose dans votre ArrayCollection/IList change, depuis remove/add/refresh/etc), il exécute quelques méthodes pour mettre à jour les itemRenderers du DataGrid. Vous devrez le coder manuellement si vous créez votre propre propriété dataProvider.

Si vous définissez le fournisseur de données explicitement sur votre composant personnalisé (custom.dataProvider = myArrayCollection), il sera mis à jour. Mais ce n'est pas la chose la plus efficace à faire. Je recommande d'étendre une des classes List qui a déjà implémenté une propriété dataProvider, il y a beaucoup à faire.

Consultez le source for the mx ListBase's dataProvider method pour voir ce qu'ils ont fait.

espoir qui aide, Lance