- Konu sahibi
- #1
HTML template etiketi ne işe yarar?
Bu rehber, declarative Shadow DOM özellikleri kullanılmayan klasik HTML
template şablonunu anlatır. Bu etiket, sayfa açılırken doğrudan görüntülenmeyen HTML parçalarını hazırlamak için kullanılır. Bu içerik, JavaScript tarafından gerektiğinde kopyalanıp sayfaya eklenir. Böylece kart, tablo satırı, liste öğesi veya modal gibi tekrar kullanılacak arayüz parçalarını HTML içinde bir şablon olarak tutabilirsiniz.Nasıl çalışır?
<template> içindeki HTML, normal DOM ağacının görünür bir parçası değildir. Tarayıcı bu içeriği parse eder ancak ekranda göstermez ve içindeki kaynakları normal sayfa içeriği gibi çalıştırmaz. JavaScript, şablonun content özelliğinden bir DocumentFragment alır. Ardından cloneNode(true) ile şablonun kopyasını oluşturup hedef elemana ekler.Şablonun içindeki öğeleri ararken doğrudan
template.querySelector() yerine çoğunlukla template.content.querySelector() kullanılmalıdır. Çünkü şablon içindeki öğeler, <template> öğesinin normal alt öğeleri olarak değerlendirilmez.Çalışan en küçük örnek
Aşağıdaki örnek, bir ürün şablonunu iki kez kopyalar ve ürün adını JavaScript ile değiştirir:
Kod:
<ul id="product-list"></ul>
<template id="product-template">
<li class="product"></li>
</template>
<script>
const template = document.querySelector('#product-template');
const list = document.querySelector('#product-list');
const products = ['Kalem', 'Defter'];
for (const name of products) {
const item = template.content.cloneNode(true);
item.querySelector('.product').textContent = name;
list.appendChild(item);
}
</script>Örneği bir HTML dosyasına yerleştirip tarayıcıda açtığınızda listede “Kalem” ve “Defter” görünür. Sonuç görünmüyorsa önce
#product-list ve #product-template seçicilerinin doğru olduğundan emin olun. Ayrıca item.querySelector() çağrısının, şablondaki .product sınıfıyla eşleştiğini kontrol edin.Uygulama sırası şöyledir:
- Tekrar kullanılacak HTML parçasını
<template>içine alın. - JavaScript ile şablonu
document.querySelector()kullanarak seçin. - Şablon içeriğinin derin kopyasını
template.content.cloneNode(true)ile kopyalayın. - Kopyadaki metinleri veya nitelikleri değiştirin.
- Kopyayı
appendChild()ya da uygun bir DOM ekleme yöntemiyle hedef elemana ekleyin.
Benzer yöntemlerden farkı
Seçim, içeriğin sayfada başlangıçta görünür olup olmamasına ve kaç kez kullanılacağına göre yapılmalıdır.
| Yöntem | Başlangıçta görünür mü? | Uygun kullanım |
|---|---|---|
<template> | Hayır | JavaScript ile üretilecek tekrar kullanılabilir parçalar |
<div hidden> | DOM’da bulunur ancak gizlidir | Gizlenip sonradan gösterilecek mevcut içerik |
| Sunucu taraflı şablon | Oluşturulan HTML’ye bağlıdır | İçeriği sunucuda üretmek |
<template> kullanmak, tek başına veri bağlama, döngü kurma veya otomatik bileşen üretme özelliği sağlamaz. Veriyi doldurma, kopyayı ekleme ve olay davranışlarını tanımlama işlerini JavaScript ya da sunucu tarafı kodu yapmalıdır. Kullanıcı etkileşimi gerekiyorsa olay dinleyicilerini oluşturulan öğelere ekleyin veya uygun durumlarda olay delegasyonu kullanın.