NgRepeat 'track by' ifadesini anlama


102

Angularjs'de ng-tekrar ifadesi ile parçanın nasıl çalıştığını anlamakta güçlük çekiyorum . Belgeler çok azdır: http://docs.angularjs.org/api/ng/directive/ngRepeat

Veri bağlama ve diğer ilgili hususlar açısından bu iki kod parçacığı arasındaki farkın ne olduğunu açıklayabilir misiniz ?

ile: track by $index

<!--names is an array-->
<div ng-repeat="(key, value) in names track by $index">
  <input ng-model="value[key]">                         
</div>

olmadan (aynı çıktı)

<!--names is an array-->
<div ng-repeat="(key, value) in names">
   <input ng-model="value[key]">                         
</div>

Çok iyi cevapları olan harika bir soru! OP'nin bir cevabı kabul etmemesi ne yazık - yoksa sorunun doğru cevaplandığını düşünmüyor musunuz?
Mawg, Monica'yı

Haklısın! TJ'nin cevabını yeni kabul ettim.
Jonathan Grupp

Yanıtlar:


97

track by $indexVeri kaynağınızın yinelenen tanımlayıcıları varsa yapabilirsiniz

Örneğin: $scope.dataSource: [{id:1,name:'one'}, {id:1,name:'one too'}, {id:2,name:'two'}]

Tanımlayıcı olarak "id" yi kullanırken bu koleksiyonu yineleyemezsiniz (yinelenen kimlik: 1).

ÇALIŞMAYACAK:

<element ng-repeat="item.id as item.name for item in dataSource">
  // something with item ...
</element>

ancak şunları kullanıyorsanız yapabilirsiniz track by $index:

<element ng-repeat="item in dataSource track by $index">
  // something with item ...
</element>

1
Cevabınız için teşekkürler! Ancak elbette yinelenen tanımlayıcılar tek kullanım durumu değildir. Ayrıca 'kaputun altında' neler olduğunu bilmek istiyorum.
Jonathan Grupp

2
pekala, bu kolay: sadece koda bir bakın, hepsi açık kaynak;)
nilsK

4
Bu soru eski ama yine de bunun açıklamanın daha iyi anlaşılmasına yardımcı olabileceğini düşünüyorum bennadel.com/blog/… buradaki açıklamanın kısa versiyonunu docs.angularjs.org/error/ngRepeat/dupes
Annapoorni D

3
Dikkate alınması gereken bir şey daha, anahtar bazında takip özelliğini kullanırsanız, daha iyi performans elde edeceğinizdir (blog.500tech.com/is-reactjs-fast). Bu özellik, benzersiz bir tanımlayıcı kullanarak bir JavaScript nesnesini bir ngRepeat DOM (Belge Nesne Modeli) düğümüyle ilişkilendirmenize olanak tanır. Bu ilişki kurulduğunda, AngularJS DOM düğümlerini gereksiz yere $ yok etmeyecek ve yeniden yaratmayacaktır. Bunun büyük bir performans ve kullanıcı deneyimi avantajı olabilir ( bennadel.com/blog/… ).
Braulio

700 garip parçalık bir listem var. Oluşturma süresi 4 saniyeden 100 ms'ye çıktı. Dinlenme kaynaklı verilere dayanan tüm ngRepeat'ler için izleme yöntemi kullanılmalıdır.
Patrick

60

kısa bir özet:

track by verilerinizi ng-tekrar ile yapılan DOM üretimi (ve esas olarak yeniden oluşturma) ile ilişkilendirmek için kullanılır.

eklediğinde track by , temelde angular'a verilen koleksiyondaki her veri nesnesi için tek bir DOM öğesi oluşturmasını söylersiniz

bu, sayfalama ve filtreleme sırasında veya nesnelerin eklendiği veya kaldırıldığı herhangi bir durumda yararlı olabilir. ng-repeat listeden .

genellikle track byaçısal olmadan $$hashKey, JavaScript nesnelerinize bir expando özelliği enjekte ederek DOM nesnelerini koleksiyona bağlar ve her değişiklikle onu yeniden oluşturur (ve bir DOM nesnesini yeniden ilişkilendirir).

tam açıklama:

http://www.bennadel.com/blog/2556-using-track-by-with-ngrepeat-in-angularjs-1-2.htm

daha pratik bir rehber:

http://www.codelord.net/2014/04/15/improving-ng-repeat-performance-with-track-by/

(tarafından takip etmek açısal> 1.2 olarak mevcuttur)


8

Nesnelerin tamamı yerine tanımlayıcıya (ör. $ İndeks) göre nesnelerle çalışıyorsanız ve verilerinizi daha sonra yeniden yüklerseniz, ngRepeat , koleksiyondaki JavaScript nesneleri varsa bile , önceden oluşturduğu öğeler için DOM öğelerini yeniden oluşturmaz. yenileri ile değiştirildi.


bunu kanıtlayan herhangi bir referans var mı?
azerafati

yeniden oluşturmayı zorlamanın bir yolu var mı? ya da başka bir iş? bunun benim için bir karışıklık yarattığına inanıyorum ve zaten çok zaman harcadım.
NeverGiveUp161

1
değişen nesnede izlemeyi veya benzersiz tanımlayıcıyı değiştirmeyin. $ Endeksini değiştiremeyeceğinizi unutmayın, bunun yerine nesneye özgü tanımlayıcıyı kullanmak yerine $ endeksini kullanmamanız önerilir (örn. İd)
ram1993
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.