JavaScript ile Görüntülemede template Kullanımı
Dinamik listeler için şablonları JavaScript döngüleriyle birleştirin
JavaScript ile Görüntülemede template Kullanımı, CoddyKit'te ücretsiz bir HTML Academy dersidir. Bu, 4 dersinin 3. 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, HTML Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. HTML Academy kursu toplamda 4 dersten oluşur.
template Öğesi
<template> öğesi, JavaScript tarafından klonlanıp eklenene kadar görüntülenmeyen HTML içerir. İçeriği etkisizdir — template etkinleştirilene kadar betikler çalışmaz, görseller yüklenmez ve stiller uygulanmaz.
template İçeriğine Erişme
template içeriği, template.content içinde bir DocumentFragment olarak bulunur. Kullanmak için parçayı klonlayın: const clone = template.content.cloneNode(true). true bağımsız değişkeni, tüm alt düğümler dâhil derin bir kopya oluşturur.
template Örneklerini Oluşturma
Eklemeye geçmeden önce klonu özelleştirin: klon içinde sorgulama yapın, metin içeriğini ayarlayın ve olay dinleyicileri ekleyin. Ardından DOM'a ekleyin: container.appendChild(clone). Her cloneNode() bağımsız bir kopya oluşturur; birini diğerlerini etkilemeden değiştirebilirsiniz.
const tmpl = document.getElementById("card-template");
function renderCard(data) {
const clone = tmpl.content.cloneNode(true);
clone.querySelector(".title").textContent = data.title;
clone.querySelector(".body").textContent = data.body;
container.appendChild(clone);
}template'lerden Listeler Oluşturma
Listeler oluşturmak için template'leri Array.forEach veya Array.map ile birleştirin: data içindeki her öğe için template'i klonlayın, değerleri doldurun ve bir liste container'ına ekleyin. Bu kalıp, standart HTML ve JavaScript üzerine kurulmuş çerçeve benzeri bir yaklaşım sunar.
Tablo Satırları için template
Hücrelere sahip bir <tr> içeren bir <template> tanımlayın. Her data satırı için klonlayıp doldurun. Bu yaklaşım, HTML oluştururken dizeleri birleştirme gereksinimini ortadan kaldırır — innerHTML yerine textContent ayarladığınız için kaçış işlemi gerekmez.
template Etkinleştirme Açıkça Yapılır
template'ler hiçbir zaman kendiliğinden görüntülenmez. Bu sayede koşula bağlı olarak görüntülenecek parçaları güvenle saklayabilirsiniz: arama sonucu boş olduğunda yalnızca "sonuç yok" template'ini, ağ hatası oluştuğunda yalnızca hata template'ini ve veri alınırken yükleme iskeletini gösterebilirsiniz.
İç İçe template'ler
Bir template başka template'ler içerebilir; iç içe template'ler dış template'in DocumentFragment'ı içinde etkisiz kalır. Bu özellik, dış template'in klonlanıp ardından iç template'lerin gerektiğinde etkinleştirildiği bileşen benzeri hiyerarşiler oluşturmayı sağlar.
template'lerde Kapsamlandırılmış Stiller
Bir template'in <style> etiketi içindeki stiller belgeye uygulanmaz; template örneği oluşturulana ve içeriği canlı DOM'a taşınana kadar etkisiz kalırlar. Böylece template'ler sayfayı kirletmeden kendi stillerini taşıyabilir.
template ile innerHTML Karşılaştırması
innerHTML ayrıştırması, HTML dizelerinin eşzamanlı olarak işlenmesidir; her seferinde HTML yeniden ayrıştırılır. template.cloneNode() ise önceden ayrıştırılmış bir ağacı kopyalar. Aynı yapının tekrar tekrar oluşturulması için template klonlama daha hızlıdır ve dize birleştirmeden kaynaklanan XSS risklerini önler.
Veri Bağlama Sınırlamaları
template öğesinde yerleşik veri bağlama bulunmaz; her klonu kendiniz sorgulayıp doldurmanız gerekir. Karmaşık veri bağlama gereksinimleri için bir çerçeve veya kütüphane daha uygundur. template'ler, çerçeve ek yükü olmadan basit ve elle yapılan oluşturma kalıpları içindir.
Tarayıcı Desteği
template öğesi tüm modern tarayıcılarda desteklenir (IE11'de kısmi destek vardı). IE desteği gerektiren ortamlar için başlangıçta template içeriğini ayrıştırarak bir uyumluluk dolgusu kullanın. Modern projelerde template'i uyumluluk dolgusu olmadan kullanın.
Bilgi Kontrolü
Tekrarlanan oluşturma işlemlerinde template.content.cloneNode(true) neden innerHTML yerine tercih edilir?
Özet
template öğesi, etkisiz ve önceden ayrıştırılmış HTML parçalarını içerir. template.content'i klonlamak, elle veri bağlama için bağımsız örnekler oluşturur. textContent atamasıyla birleştirildiğinde (XSS içermez), template'ler yalnızca standart tarayıcı API'leriyle çerçeve benzeri liste oluşturma, koşullu kullanıcı arayüzü ve yeniden kullanılabilir HTML kalıpları sağlar.
Sıkça Sorulan Sorular
“JavaScript ile Görüntülemede template Kullanımı” dersi ücretsiz mi?
Evet — “JavaScript ile Görüntülemede template Kullanımı” 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 HTML Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. HTML Academy kursu toplamda 4 dersten oluşur.
“JavaScript ile Görüntülemede template Kullanımı” dersinde ne öğreneceğim?
Dinamik listeler için şablonları JavaScript döngüleriyle birleştirin HTML 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.
HTML Academy öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te HTML 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 3. dersidir.
“JavaScript ile Görüntülemede template Kullanımı” 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 HTML Academy dersinde kod yazıp çalıştırabilir miyim?
Evet. Her HTML 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
- template Öğesi: İşlenmeyen İçerik
- cloneNode ile Şablonları Klonlama
- JavaScript ile Görüntülemede template Kullanımı
- Şablonlar ve innerHTML Güvenliği