Każdy z angularowców – trochę mi się ta nazwa nie podoba – może powinno być „praktyków” lub „miłośników” AngularJS – prędzej czy później natknie się w swoim kodzie (lub już natknął) na dyrektywę ng-repeat. Cóż to takiego? Ano taki foreach. Dla każdego elementu w kolekcji tworzymy coś w DOM. Przykład:
<div ng-repeat="product in products"> {{product.name}} <div>
Co się dzieje w powyższym kodzie? Za każdym elementem w kolekcji products, tworzony jest nowy div zawierający nazwę produktu. Czy w powyższym kodzie wszystko jest takie, jak być powinno? Ano nie.
Powiedzmy, że element product wygląda w ten sposób:
var product = { id: id, name: name }
Wszystko wygląda pięknie i kolorowo. Do czasu, aż nie odświeżymy listy z produktami (np. ponowne załadowanie jej elementami z serwera). Wtedy okazuje się, że wszystkie elementy w DOM są wygenerowane ponownie (np. lista 1000 produktów przegeneruje 1000 razy div). Jak tego uniknąć/ograniczyć?
Tu przychodzi z pomocą tytułowe „track by”:
<div ng-repeat="product in products track by product.id"> {{product.name}} <div>
Dzięki temu, w momencie, gdy identyfikatory naszych produktów pozostały takie same – powiedzmy 1000 produktów się nie zmieniło, a dodaliśmy 25 nowych elementów -, to wtedy nasza dyrektywa ng-repeat nie wygeneruje na nowo elementów, ale zostawi je na miejscu, dokładając nowe 25 elementów do DOM. Chyba nie trzeba mówić, jak bardzo wpływa to na szybkość działania aplikacji 🙂