Comment déclencher un rappel dans un composant Polymer lorsqu'il est connecté au DOM?

Question

I ayant troules intégrant jsPlumb dans un composant polymère qui est destiné à être utilisé en tant que greffon dans une application enveloppé Electron. La version de Polymer que j'utilise est 1.2.0 parce que c'est ce qui a été livré avec l'application. JsPlumb exige que les éléments dragables et leurs sources et cibles aient été montés sur le DOM, mais cela ne semble pas être le cas lorsque attached est déclenché. Ce que j'ai fait était de définir un simeout pour continuer à interroger le DOM jusqu'à ce que le componet ait été "vraiment" monté, puis continuer l'initialisation en passant la nouvelle instance de jsPlumb aux nœuds dans le graphique afin qu'ils puissent correctement configurer le sources et cibles pour chaque port d'entrée et de sortie.

Question

Ce que je veux savoir est de savoir s'il y a une autre façon de « attendre » pour que le composant soit disponible pour jsPlumb en utilisant uniquement l'API polymère au lieu d'un délai d'attente?

<link rel="import" href="my-node.html"> 

<dom-module id="my-graph"> 
    <template> 
     <div id="canvas"> 
      <template is="dom-repeat" items="{{nodes}}"> 
       <my-node></my-node> 
      </template> 
     </div> 
    </template> 

    <script> 
     Polymer({ 
      is: "my-graph", 
      properties: { 
       nodes: { 
        type: Array, 
        value: function(){return [];} 
       } 
      }, 
      attached: function() { 
       this._attachedDeferred(); 
      }, 
      _attachedDeferred: function() { 
       // wait for the component to be attached 
       if (!document.contains(this) || !this.offsetParent) { 
        setTimeout(function(){ 
         this._attachedDeferred(); 
        }.bind(this), 100); 
        return; 
       } 

       // ready to init jsPlumb 
       this.instance = jsPlumb.getInstance({ 
        Container: "canvas" 
       }); 

       // init the graph nodes 
       var nodes = [ 
        { 
         pos: [0,0], 
         jsPlumb: this.instance; // the new instance of jsPlumb 
         inputs: {...}, 
         outputs: {...} 
        } 
       ]; 
       this.nodes = nodes; 
      } 
     }); 
    </script> 
</dom-module> 

Answer 1

Je suppose que vous essayez d'accéder aux <my-node> éléments?

<template is="dom-repeat"> crée son contenu de manière asynchrone, donc ses enfants ne seront pas encore disponibles pendant attached. Vous devez écouter l'événement dom-change avant de pouvoir y accéder.

Vérifiez la documentation après l'en-tête « calendrier initialisation pour enfants DOM locaux ».