0Pricing
Sveltejs Academy · Ders

İç İçe {#each} ve Anahtarlı Güncellemeler

İç içe listeleri yönetin ve anahtarlı each bloklarıyla verimli DOM güncellemeleri sağlayın.

İç İçe {#each} ve Anahtarlı Güncellemeler, CoddyKit'te ücretsiz bir Sveltejs Academy dersidir. Bu, 4 dersinin 4. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Sveltejs Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Sveltejs Academy kursu toplamda 4 dersten oluşur.

İki Boyut

Tabloları, ızgaraları veya ağaçları görüntülemek için {#each} bloklarını iç içe yerleştirin.

{#each rows as row, i}
  <tr>
    {#each row as cell, j}
      <td>{cell}</td>
    {/each}
  </tr>
{/each}

Her Düzeyde Anahtar

Verimli güncellemeler için her düzeye anahtar ekleyin.

{#each rows as row (row.id)}
  {#each row.cells as cell (cell.id)}
    ...
  {/each}
{/each}

Ağaç Yapıları

Ağaç benzeri veriler için yinelemeye uygun bileşenler veya each blokları kullanın.

Dizin Anahtarlarından Kaçının

Dizi dizinini anahtar olarak kullanmak, öğeler ortaya eklendiğinde veya ortadan kaldırıldığında başarısız olur. Kararlı bir kimliği tercih edin.

Değiştirilebilir Veri Tuzağı

Dış başvuruyu yeniden atamadan iç içe dizileri değiştirmek tepkiselliği bozar. En üst düzeyde yeniden atama yapın.

rows = rows.map(r => r.id === id ? {...r, name} : r);

Filtreleme ve Sıralama

Filtreleme veya sıralama yaparken her zaman yeni bir dizi döndürün; yerinde değiştirme güncellemeleri tetiklemez.

sorted = [...items].sort();

Performans

Anahtarlar öğe eklemeyi, kaldırmayı veya taşımayı O(n) hâline getirir; böylece tüm görünümü yeniden oluşturmaya gerek kalmaz.

Listeleri Yeniden Sıralama

Anahtarlarla yeniden sıralama animasyonları kolaydır: animate:flip ile birleştirin.

İçeride Koşullu Görüntüleme

Hangi öğelerin görüntüleneceğini ayrıntılı biçimde denetlemek için each içinde {#if} bloklarını kullanın.

Her Öğe İçin Bileşen

Karmaşık öğelerde döngü gövdesini küçük tutmak için bir alt bileşen görüntüleyin.

{#each todos as todo (todo.id)}
  <Todo {todo} />
{/each}

Sayfalandırma Kalıbı

Uzun listelerde binlerce düğüm görüntülemek yerine sayfalandırma veya sanallaştırma kullanın.

Hızlı Kontrol

Anahtarlar için dizinler yerine neden kararlı kimlikler tercih edilir?

Özet

2B veriler için each bloklarını iç içe yerleştirin, her düzeye kararlı kimliklerle anahtar verin ve güncellemeleri tetiklemek için koleksiyonları her zaman yeniden atayın.

Sıkça Sorulan Sorular

“İç İçe {#each} ve Anahtarlı Güncellemeler” dersi ücretsiz mi?

Evet — “İç İçe {#each} ve Anahtarlı Güncellemeler” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Sveltejs Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Sveltejs Academy kursu toplamda 4 dersten oluşur.

“İç İçe {#each} ve Anahtarlı Güncellemeler” dersinde ne öğreneceğim?

İç içe listeleri yönetin ve anahtarlı each bloklarıyla verimli DOM güncellemeleri sağlayın. Sveltejs Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

Sveltejs Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te Sveltejs Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 4. dersidir.

“İç İçe {#each} ve Anahtarlı Güncellemeler” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu Sveltejs Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her Sveltejs Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

  1. {#if} {#else if} {#else}
  2. Dizin ve Anahtarla {#each}
  3. Yeniden Oluşturmayı Zorlamak için {#key}
  4. İç İçe {#each} ve Anahtarlı Güncellemeler
← Sveltejs Academy Sayfasına Dön