AngularJS – track by

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 🙂

Zostaw komentarz

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s