Polymer automatische Knoten finden mit dynamischen ID-Wert

Question

Wie kann ich zugreifen Knoten, die dynamische ID-Wert mit Polymer-Knoten-Suche nach ID?

Zum Beispiel

<template> 
    <div id="{{ id }}"></div> 
</template> 

und in js

Polymer("my-element", { 
    ready: function() { 
     if (!this.id) { 
      this.id = 'id' + (new Date()).getTime(); 
     } 

     console.log(this.$.id); // this part needs to find my div element 
    } 
}); 

Answer 1

Es stimmt, dass ein JavaScript-Hash kann entweder Punkt zugegriffen werden . oder Array [] Notation. Wenn Sie einen Literalnamen haben, können Sie die Punktnotation this.$.some_id verwenden. Wenn Sie eine Indirektion haben, wie this.id = 'some_id', können Sie die Array-Notation this.$[this.id] verwenden, um den gleichen Wert zu finden.

Der schwierige Teil ist, dass Polymer nur $ Array nach dem ersten Stempeln der Vorlage bevölkert, was vor ready passiert. Wenn Sie eine externe Bindung an this.id hätten, würde this.$.[this.id] funktionieren, aber da Sie this.id in ready festlegen, ist es zu spät für die $ Bequemlichkeit.

In diesem Fall können Sie stattdessen Ihre shadowRoot direkt abfragen:

this.shadowRoot.querySelector('#' + this.id)

Pro Tipp: eine Unterklasse an einem gewissen Punkt kann eine neue Vorlage liefern, wobei in diesem Fall this.shadowRoot auf den neuen Schatten- Punkt Root und nicht die Superklasse Version. Aus diesem Grund ist es am besten, ein benanntes Div zu installieren, das Sie abfragen können, z. this.$.id_div.querySelector('#' + this.id').

Answer 2

Sie $ wie ein Hash verwenden können:

id = 'computed_element_id'; 
this.$[id]; 

Answer 3

Polymer ein Verfahren dazu bietet (source):

Für dynamisch erstellten Knoten in Ihrem Element des lokalen DOM lokalisieren, verwenden Sie die $$ Methode:

this.$$(selector)

$$ kehrt die erster Knoten im lokalen DOM, der mit selector übereinstimmt

In Ihrem Fall sollte diese Arbeit:

console.log(this.$$('#' + id)); 

Answer 4

Nach this document in Polymer 2.x $$ nicht unterstützt wird, so this.shadowRoot.querySelector stattdessen verwenden.

console.log(this.shadowRoot.querySelector('#' + id)); 

Wenn Sie Polymer 1.x verwenden, dann können Sie $$ verwenden.