Éléments personnalisés ne détectant pas les enfants lorsqu'ils sont instanciés dans le modèle d'un autre élément personnalisé

Question

J'ai un élément HTML principal RPG défini comme suit. Je l'instancie dans le corps de mon fichier index.html.

<link rel="import" href="packages/polymer/polymer.html"> 
<link rel="import" href="gridlayout.html"> 
<link rel="import" href="gridtile.html"> 


<polymer-element name="rpg-main" attributes=""> 
    <template> 
    <style> 
     grid-tile { 
     background: #FF00FF; 
     width: 50px; 
     height: 50px  
     } 
    :host { 
     position: absolute; 
     display: block; 
     width: 500px; 
     height: 500px; 
     } 

    </style> 
    <grid-layout rows = "2" cols = "2" spacing = "50px"> 
     <grid-tile> 
     </grid-tile> 
     <grid-tile> 
     </grid-tile> 
     <grid-tile> 
     </grid-tile> 
     <grid-tile> 
     </grid-tile> 
    </grid-layout> 
    </template> 
    <script type="application/dart" src="rpgmain.dart"></script> 
</polymer-element> 

Comme on pouvait s'y attendre, j'ai aussi une grille mise en page et des éléments grille de tuiles définies. Dans le constructeur de la grille-mise en page, j'essaie de référencer ses enfants. Mais l'élément pense qu'il a 0 enfants quand il est instancié dans la classe RPG-main ci-dessus.

import 'package:polymer/polymer.dart'; 
import 'dart:html'; 

@CustomTag('grid-layout') 
class GridLayout extends PolymerElement { 
    @published int rows; 
    @published int cols; 
    @published int spacing; 

    String _px = "px"; 
    String _perc = "%"; 

    GridLayout.created() : super.created() { 

    print("NUM CHILDREN " + this.children.length.toString()); 

    /** for (int i = 0; i <= this.rows + this.cols - 2; i++) { 
     Element child = this.children[i]; 
     this.children[i].style.margin = this._parseNum(spacing); 
     child.style.float = "right"; 

     if (i % this.rows == this.rows) { 
     child.style.clear = "right"; 
     } 


    }**/ 
    } 
    num _parseString(String s) { 
    print(s.toString()); 
    return num.parse(s.split(_px)[0]); 
    } 

    String _parseNum(num n) { 
    return n.toString() + _px; 
    } 
} 

*** Les impressions de code ci-dessus « ENFANTS NUM: 0 »

Il est seulement instancié dans mon élément rpg-principal, donc je suis surpris qu'il ne reconnaîtrait pas la grille-carreaux comme enfants. Serait-ce parce que l'élément grid-layout est instancié dans la balise template d'un élément personnalisé rpg-main? (Donc, peut-être que la disposition en grille ne considère pas que ses enfants sont dans le «dom léger»?) Ce serait une honte, mais si oui, quelle serait la solution de contournement?

Answer 1

Le constructeur est juste au mauvais endroit. Vous devez autoriser les éléments à s'initialiser correctement avant de les utiliser.

Essayez

@override 
void attached() { 
    super.attached(); 
    print("NUM CHILDREN " + this.children.length.toString()); 
} 

voir aussi Justins réponse ici When is shadowRoot available to a polymer component?