In Polymer sendet der Vorlagenhelfer dom-repeat ein dom-change-Ereignis, wenn das Ergebnis einer Iteration in das DOM eingeprägt wird. Gibt es eine Möglichkeit für mich zu sagen, wann ALLE Iterationen abgeschlossen sind?So erkennen Sie, wenn dom-repeat ausgeführt wird: stanzen von Elementen
Vielleicht kann dieses einfache Beispiel helfen, das Verhalten zu erklären und die Kommentare zu erweitern.
<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>
Wenn dom-change abgefeuert wird, log ich das Ereignis an die Konsole, so öffnen Sie die Entwickler-Tools und haben einen Blick. Anfänglich hat der dom-repeat drei Iterationen und füllt das dom mit drei Elementen. Beachten Sie, dass nur ein Ereignis ausgelöst wird, wenn alle drei Elemente hinzugefügt wurden. Wenn Sie auf die Schaltfläche klicken, werden zwei weitere Elemente zum Inhalt der Wiederholung hinzugefügt. Da die dom-repeat asynchron aktualisiert wird, werden diese beiden Elemente erneut auf einmal verarbeitet und lösen nur ein Ereignis aus.
So ist das dom-change Ereignis tatsächlich das letzte Ereignis, das Sie suchen. Es wird nur erneut ausgelöst, wenn Sie die Objekte manipulieren, die daran gebunden sind.
Um einen dynamisch erstellten Knoten (wie Vorlage Wiederholung) zugreifen Verwendung:...
diese $$ ('# id')
anstelle dieses $ id
zum Beispiel, wenn die Vorlage ID ist "Vorlage" Sie
diese verwenden sollten. $$ ('# template')
ready: function(){
this.$$('#template').addEventListener("dom-change", function(event){
console.log(event);
});
},
Ist es möglich, dies zu ermitteln, indem Sie die Daten im dom change-Ereignis betrachten und wissen, welches Datenelement zuletzt sein sollte, und dann danach suchen? Vielleicht nicht die ideale Lösung. – newfivefour
https://github.com/Polymer/polymer/blob/master/src/lib/template/dom-repeat.html @ 348 es feuert ein Ereignis am Ende seiner render() –
wie Robert sagt über die 'dom "change" wird ausgelöst, wenn das Rendern der Vorlage "dom-repeat" abgeschlossen ist. Sie sollten dann zu Ihrer Vorlage die folgende Codezeile hinzufügen können, die eine Funktion ausführt, wenn dieses Ereignis ausgelöst wird: '' –