2013-11-14 14 views
6

Ho un elemento personalizzato che ospita esso stesso un elemento personalizzato.Come accedere all'host di un elemento personalizzato

<polymer-element name="flex-nonvisual"> 
    <template> 
    <polymer-flex-layout></polymer-flex-layout> 
    </template> 
</polymer-element> 

Ora, in attached() (o qualche altro callback) di PolymerFlexLayout voglio impostare l'attributo class dell'elemento flex-nonvisual.

in javascript il codice è simile this.parentNode.host.classList.add('someclass');

In Dart in attached() (dopo la chiamata a super.attached()) this.parent è null e non ho potuto trovare qualsiasi altro riferimento all'elemento ospite.

Come posso farlo in Dart?

+2

Una piccola osservazione: vorrei prendere in considerazione questa cattiva pratica da quando si rompe l'incapsulamento del componente polimerico-flex-layout. In generale, un componente figlio non dovrebbe mai impostare proprietà o invocare metodi su un genitore. Il bambino dovrebbe inviare un evento che il genitore può ascoltare e decidere di cambiare le sue proprietà. –

+0

Hai ragione, non ho pensato a modi alternativi.Attualmente sto eseguendo il porting di elementi polimerici da Javascript e ho appena provato a fare lo stesso in Dart quello che hanno fatto in JS.Grazie molto per il tuo aiuto dalla corsia cieca ;-). –

risposta

5

aggiornamento: Polimero> = 1.0.x

DOM ombreggiato

new PolymerDom(this).parentNode; 

o

domHost 

abbreviazione di

Polymer.dom(this).getOwnerRoot().host 

piena ombra DOM

(this.parentNode as ShadowRoot).host 

@ChristopheHerreman e @MattB sono ancora di destra circa l'incapsulamento non deve essere rotto.

Ma anche gli elementi JS Polymer accedono al genitore nei loro elementi di layout perché è ancora conveniente in alcuni scenari.

Questo funziona ora anche in PolymerDart.

Polymer.dart < = 0.16.x

(this.parentNode as ShadowRoot).host 
7

Purtroppo l'ordine di creazione di elementi personalizzati non è garantito. Vedere lo Polymer.dart discussion e la discussione correlata su Polymer discussion groups.

Tuttavia, come accennato, l'utilizzo particolare interromperà l'incapsulamento e l'utilizzo di CustomEvents è molto più importante. E con Polymer questo diventa molto facile da implementare.

<!-- flex_nonvisual.html file --> 

<polymer-element name="flex-nonvisual"> 
    <template> 
    <polymer-flex-layout on-ready="{{layoutReady}}"></polymer-flex-layout> 
    </template> 
</polymer-element> 
// polymer_flex_layout.dart file 

@CustomTag('polymer-flex-layout') 
class PolymerFlexLayout extends PolymerElement { 
    // other stuff here 
    void attached() { 
    super.attached(); 
    dispatchEvent(new CustomEvent('ready')); 
    } 
} 
// flex_nonvisual.dart 

@CustomTag('flex-nonvisual') 
class FlexNonvisual extends PolymerElement { 
    // Other stuff here 
    void layoutReady(Event e, var details, Node node) { 
    this.classes.add('someclass'); 
    } 
} 
+0

Grazie mille. Penso che tu e Christophe avete assolutamente ragione. –

Problemi correlati