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 🙂