W programie Polymer szablon pomocniczy dom-repeat emituje zdarzenie dom-change za każdym razem, gdy nadpisuje wynik iteracji w DOM. Czy istnieje sposób dla mnie, aby powiedzieć, kiedy ALL z iteracji są kompletne?Jak stwierdzić, kiedy powtarzane są powtórzenia DOM Elementy stemplowania
Być może ten prosty przykład pomoże wyjaśnić zachowanie i rozszerzyć komentarze.
<dom-module id="change-tester">
<template>
<h1>Change Tester</h1>
<ul>
<template id="template" is="dom-repeat" items="{{content}}">
<li>{{item}}</li>
</template>
</ul>
<button on-click="more">Add more</button>
</template>
</dom-module>
<script>
Polymer({
is: 'change-tester',
properties: {
content: {
type: Array,
value: function(){ return ["one", "two", "three"]}
}
},
ready: function(){
this.$.template.addEventListener("dom-change", function(event){
console.log(event);
});
},
more: function(){
this.push("content", "four");
this.push("content", "five");
}
});
</script>
Ilekroć dom-change jest zwolniony, loguję zdarzenie do konsoli, więc otworzyć narzędzia dev i rzucić okiem. Początkowo dom-repeat ma trzy iteracje i zapełni dom trzema elementami. Zauważ, że zostanie wywołane tylko jedno zdarzenie, a mianowicie po dodaniu wszystkich trzech elementów. Kliknięcie przycisku powoduje dodanie dwóch kolejnych elementów do treści powtórzenia. Ponieważ aktualizacje dom-repeat są asynchronicznie aktualizowane, te dwa elementy są ponownie obsługiwane za jednym razem i powodują tylko jedno zdarzenie.
Tak więc wydarzenie dom-change jest tak naprawdę wydarzeniem finałowym, którego szukasz. Ponownie wystrzeli tylko, jeśli manipulujesz przedmiotami, które są do niego przywiązane.
Aby uzyskać dostęp do dynamicznie utworzony węzeł (jak powtórzenia szablonu) zastosowanie:...
ten $$ ('# id')
zamiast tego $ id
Na przykład, jeśli id szablon jest "szablon" należy użyć
to. $$ ('# szablon')
ready: function(){
this.$$('#template').addEventListener("dom-change", function(event){
console.log(event);
});
},
Czy można to ustalić, patrząc na dane w zdarzeniu dom change - wiedząc, który element danych powinien być ostatni, a następnie sprawdzając? Być może nie jest to jednak idealne rozwiązanie. – newfivefour
https://github.com/Polymer/polymer/blob/master/src/lib/template/dom-repeat.html @ 348 uruchamia zdarzenie po zakończeniu renderowania() –
, jak Robert mówi powyżej 'dom -change 'event jest wywoływane, gdy renderowanie szablonu' dom-repeat' jest zakończone. Powinieneś wtedy móc dodać do szablonu następujący wiersz kodu, który wykona funkcję, gdy to zdarzenie zostanie uruchomione: '' –