Automatyczne wykrywanie węzłów polimerowych z dynamiczną wartością identyfikatora

Question

W jaki sposób uzyskać dostęp do węzła o dynamicznej wartości identyfikacyjnej za pomocą wyszukiwania węzłów polimerowych według identyfikatora?

Na przykład

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

iw 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

To prawda, że ​​hash JavaScript można uzyskać przy użyciu kropki . lub tablica [] notacja. Jeśli masz dosłowne imię, możesz użyć notacji kropkowej this.$.some_id. Jeśli masz opcję pośrednią, taką jak this.id = 'some_id', możesz użyć notacji tablicowej this.$[this.id], aby znaleźć tę samą wartość.

Najtrudniejszą częścią jest to, że polimer wypełnia tylko tablicę $ po pierwszym wytłoczeniu szablonu, co ma miejsce przed ready. Jeśli masz zewnętrzne powiązanie z this.id, this.$.[this.id] będzie działać, ale ponieważ ustawiasz this.id w ready, jest za późno na wygodę dla $.

W tym przypadku, można zamiast zapytanie do shadowRoot bezpośrednio:

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

Pro wskazówka: w pewnym momencie podklasą mogą dostarczyć nowy szablon, w którym to przypadku this.shadowRoot wskaże nowego shadow- root, a nie wersja superklasy. Z tego powodu najlepiej jest zainstalować nazwany div, o który można zapytać, np. this.$.id_div.querySelector('#' + this.id').

Answer 2

Można użyć $ jak hash:

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

Answer 3

polimerowa zapewnia metoda ta (source):

Do lokalizowania dynamicznie utworzonych węzłów w elemencie w lokalnym DOM, należy użyć metody $$:

this.$$(selector)

$$ zwraca pierwszy węzeł w lokalnym DOM, który pasuje do selektora.

W twoim przypadku, to powinno działać:

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

Answer 4

Według this document w Polymer 2.x $$ nie jest obsługiwana, więc zamiast używać this.shadowRoot.querySelector.

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

Jeśli używasz Polymer 1.x następnie można użyć $$.