Wie funktioniert ng-repeat?

8

Ich sequenzierte ng-repeat und extrahierte die angehängten Code-Blöcke, da diese die Logik umfassen, die den wiederholenden Algorithmus behandelt (den ich verstehen möchte, wie er funktioniert).

Ich habe einige Fragen, aber da es alles um die Interna von ng-repeat geht, habe ich beschlossen, sie alle hier zu fragen. Ich sehe keinen Grund, sie in verschiedene SO-Fragen zu trennen. Ich habe inline markiert, auf welche Zeile (n) des Codes sich jede Frage bezieht.

  1. Warum müssen sie sicherstellen, dass trackById nicht die native Funktion hasOwnProperty ist? (Das ist, was diese assertNotHasOwnProperty -Funktion tut, Teil der internen API von Angular)
  2. So weit meine Intuition geht, wird dieser Code auf bereits im Repeater befindlichen Objekten ausgeführt, wenn er die Sammlung aktualisieren muss - er nimmt sie einfach auf und schiebt sie zur Verarbeitung in die Liste, oder?
  3. Dieser Codeblock sucht offensichtlich nach Duplikaten in der Repeatersammlung. Aber wie genau macht es das ist jenseits von mir. Bitte erläutern.
  4. Warum muss Angular das Blockobjekt sowohl nextBlockMap als auch in nextBlockOrder speichern?
  5. Was sind block.endNode und block.startNode ?
  6. Ich nehme an, die Antwort auf die obige Frage wird klären, wie dieser Algorithmus funktioniert, aber bitte erläutern Sie, warum er überprüfen muss, ob nextNode (war) '$$NG_REMOVED' ?
  7. Was passiert hier? Ich nehme an, dass Frage 6 bereits eine Antwort auf diese Frage geben wird. Aber immer noch darauf hinweisend.

Wie ich schon sagte, habe ich mich durch ng-repeat gegraben, um den Code zu finden, den ich für den Wiederholungsmechanismus für relevant hielt. Außerdem verstehe ich den Rest der Richtlinie. Also ohne weiteres, hier ist der Code (ab v1.2.0):

%Vor%     
pilau 21.11.2013, 22:40
quelle

1 Antwort

10

Nachdem ich an der Direktive herumgebastelt hatte, wurde ich mit ng-repeater s Code vertraut und konnte einige meiner Fragen beantworten. Ich habe in bold die Dinge hervorgehoben, die ich noch nicht selbst herausfinden konnte, und würde mich freuen, wenn jemand die kühnen Teile beleuchten könnte:

  1. Die ID wird auf hasOwnProperty getestet, weil sie anhand dieser Methode überprüfen, ob die ID in den Iterationsobjekten ( lastBlockMap , nextBlockMap ) vorhanden ist (dieser Prozess wird nachstehend erläutert). Ich konnte jedoch nicht herausfinden, in welchem ​​Szenario dies tatsächlich passieren kann.
  2. Ich hatte meine Annahme richtig. nextBlockMap enthält alle Elemente, die bei der aktuellen Modelländerung übernommen werden. lastBlockMap enthält alles aus dem vorherigen Modellupdate. Es wurde verwendet, um Duplikate in der Sammlung zu finden.
  3. OK, das ist eigentlich ziemlich einfach. In dieser for -Schleife füllt ng-repeat nextBlockMap mit Elementen aus lastBlockMap auf. Betrachtet man die Reihenfolge von if s, ist es leicht zu sehen, dass das Objekt nicht in lastBlockMap gefunden werden kann, aber es ist bereits in nextBlockMap vorhanden (was bedeutet, dass es dort bereits von lastBlockMap kopiert wurde) sein trackById erscheint zweimal in der Sammlung - es ist ein Duplikat. Was die forEach macht, wird einfach durch alle initialisierten Elemente in nextBlockMap ( block s, die eine startNode -Eigenschaft haben) und drückt ihre ID zurück in lastBlockMap . Ich kann jedoch nicht verstehen, warum das notwendig ist.
  4. Der einzige Grund, den ich finden könnte, um nextBlockOrder (alle trackById s in einem Array) von nextBlockMap (alle block Objekte in einem trackById Hash) zu trennen, ist diese Zeile, die mit einem Array macht es eine einfache und einfache Operation: if (nextBlockOrder[index - 1]) previousNode = nextBlockOrder[index - 1].endNode; . Dies wird in den Antworten zu Frage 5 und 6 erläutert:
  5. block.startNode und block.endNode sind die ersten und letzten DOM-Knoten in dem Block, die zu einem Element in der gesammelten Wiederholung gehören. Daher setzt diese Zeile hier previousNode , um auf den letzten DOM-Knoten des vorherigen Elements im Repeater zu verweisen.
  6. previousNode wird dann als erster Knoten in einer Schleife verwendet, die überprüft, wie sich das DOM änderte, wenn Elemente verschoben oder aus der Repeater-Sammlung entfernt wurden - wiederum nur, falls wir nicht mit dem ersten Block im Array arbeiten.
  7. Das ist einfach - es initialisiert den Block - weist $scope und startNode und endNode zur späteren Referenz zu und speichert alles in nextBlockMap . Der Kommentar, der direkt nach dem geklonten Element erstellt wurde, soll sicherstellen, dass wir immer ein endNode .
  8. haben
pilau 27.11.2013, 07:49
quelle