HTML5 şablon <template> öğesi, çok fazla kullanılmamış ancak JavaScript ile başlatılabilen ve doldurulabilen yeniden kullanılabilir HTML yapıları hazırlamak için çok yararlı olan bir etikettir. DOM API ve JavaScript herhangi bir yerel veri bağlantısı sunmuyor. Şablon elemanla birlikte, kolayca ve herhangi bir harici kütüphane olmadan bir tür veri birleştirme uygulayabiliriz.
<template> etiketi
Bir <template> etiketi varsayılan olarak görüntülenmez. Bu temelde belgede hazırlanan bir HTML pasajıdır. Bu örnekte, şablon üç sütunlu bir tablo satırıdır:
1 2 3 4 5 6 7 8 9 | <template id="renk-template"> <tr> <td class="renk-ad"></td> <td class="renk-deger"></td> <td class="renk-ornek"></td> </tr> </template> |
Sonra belgeye üç sütunlu bir tablo ekliyorum. <tbody> şimdilik boş. Şablonun örneklerini içerecektir.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <table class="renk-tablo"> <thead> <tr> <th>Renk Adı</th> <th>Değeri</th> <th>Örnek Renk</th> </tr> </thead> <tbody> <!-- Sonra doldurulacak --> </tbody> </table> |
Şablonu uygulama
Burada çok temel bir JSON veri örneği nesnesi kuruyorum. Gerçek hayatta, örneğin bir API’den gelen XMLHttpRequest’in bir sonucu olabilir. Bu örnekte, anahtarlar CSS’deki gri renkli anahtar kelimelerin tüm isimleridir ve değerler onaltılık dize temsilidir.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | const renkler = { "black": "#000000", "darkslategray": "#2f4f4f", "dimgray": "#696969", "gray": "#808080", "slategray": "#708090", "lightslategray": "#778899", "darkgray": "#a9a9a9", "silver": "#c0c0c0", "lightgray": "#d3d3d3", "gainsboro": "#dcdcdc", "whitesmoke": "#f5f5f5", "ghostwhite": "#f8f8ff", "snow": "#fffafa", "white": "#ffffff" }; |
Şimdi birkaç değişken daha hazırlayabiliriz. Değerleri değiştirmeyeceğim için ES6 sabitlerini burada kullanıyorum.
1 2 3 4 5 | const renkTemplate = document.getElementById("renk-template"), renkTablo = document.querySelector(".renk-tablo"), renkTabloTbody = renkTablo.querySelector("tbody"); |
Ardından, şablonun örneğini doldurmak için örnek nesnesinin boyutunda bir döngü çalıştırılır:
1 2 3 4 5 6 7 8 9 10 | for (let renkAd in renkler) { const renkDeger = renkler[renkAd], renkTemplateOrnek = document.importNode(renkTemplate.content, true); //şablon örneği renkTemplateOrnek.querySelector(".renk-ad").textContent = renkAd; renkTemplateOrnek.querySelector(".renk-deger").textContent = renkDeger; renkTemplateOrnek.querySelector(".renk-ornek").style.background = renkDeger; renkTabloTbody.appendChild(renkTemplateOrnek); //ilgili tabloya doldur } |
Ornek.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 | <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>TasarimKodlama</title> </head> <body> <table class="renk-tablo"> <thead> <tr> <th>Renk Adı</th> <th>Değeri</th> <th>Örnek Renk</th> </tr> </thead> <tbody> <!-- Sonra doldurulacak --> </tbody> </table> <template id="renk-template"> <tr> <td class="renk-ad"></td> <td class="renk-deger"></td> <td class="renk-ornek"></td> </tr> </template> <script> const renkler = { "black": "#000000", "darkslategray": "#2f4f4f", "dimgray": "#696969", "gray": "#808080", "slategray": "#708090", "lightslategray": "#778899", "darkgray": "#a9a9a9", "silver": "#c0c0c0", "lightgray": "#d3d3d3", "gainsboro": "#dcdcdc", "whitesmoke": "#f5f5f5", "ghostwhite": "#f8f8ff", "snow": "#fffafa", "white": "#ffffff" }; const renkTemplate = document.getElementById("renk-template"), renkTablo = document.querySelector(".renk-tablo"), renkTabloTbody = renkTablo.querySelector("tbody"); for (let renkAd in renkler) { const renkDeger = renkler[renkAd], renkTemplateOrnek = document.importNode(renkTemplate.content, true); //şablon örneği renkTemplateOrnek.querySelector(".renk-ad").textContent = renkAd; renkTemplateOrnek.querySelector(".renk-deger").textContent = renkDeger; renkTemplateOrnek.querySelector(".renk-ornek").style.background = renkDeger; renkTabloTbody.appendChild(renkTemplateOrnek); //ilgili tabloya doldur } </script> </body> </html> |
Çıktı:
<template> öğesini kullanma
Önemli olan, şablon içeriğini, elemanları içe aktararak klonlamaktır:
1 2 3 | let renkTemplate = document.getElementById("renk-template"); |
İkinci parametre, true değerine ayarlandığında tüm torunları içe aktarmaktır. Elbette istediğimiz bu! Şablonun örneği henüz gösterilmemiştir, ancak sınıfları değiştirerek veya örneğin içerik ekleyerek DOM yapısı üzerinde zaten çalışabiliriz. Şimdilik değişiklikler sadece hafızada yapılır ve bu noktada ilk şablona olan bağlantı kaybedilir.
Ardından şablonun örneğini görüntülemek için geçerli belgede bir yere eklemeliyiz.
1 2 3 | element.appendChild(sablonOrnek); |
Bu, bir <iframe> öğesinden düğüm alma işlemine çok benzer. DOM API’nin bu işlevleri hakkındaki dokümantasyon sayfaları:
- document.importNode() method.
- template element.
- node.appendChild() method.
- node.insertBefore() method.
Tarayıcı desteği
Tarayıcı desteği, kullanabilir miyim göre oldukça iyidir. Bu makalede, HTML şablonları için tarayıcı desteği ve kullandığım ES6 özellikleri oldukça eşdeğer olduğundan, ES6 JavaScript kodu yazdım.
Örnek: SVG içeriğin rengini değiştirme
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 | <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>TasarimKodlama</title> </head> <body> <table class="renk-tablo"> <thead> <tr> <th>Renk Adı</th> <th>Değeri</th> <th>Örnek Renk</th> </tr> </thead> <tbody> <!-- Sonra doldurulacak --> </tbody> </table> <template id="renk-template"> <tr> <td class="renk-ad"></td> <td class="renk-deger"></td> <td > <figure> <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="25px" height="25px" viewBox="0 0 442.533 442.533" style="enable-background:new 0 0 442.533 442.533;" xml:space="preserve"> <g> <path class="renk-ornek" fill="black" d="M434.539,98.499l-38.828-38.828c-5.324-5.328-11.799-7.993-19.41-7.993c-7.618,0-14.093,2.665-19.417,7.993L169.59,247.248 l-83.939-84.225c-5.33-5.33-11.801-7.992-19.412-7.992c-7.616,0-14.087,2.662-19.417,7.992L7.994,201.852 C2.664,207.181,0,213.654,0,221.269c0,7.609,2.664,14.088,7.994,19.416l103.351,103.349l38.831,38.828 c5.327,5.332,11.8,7.994,19.414,7.994c7.611,0,14.084-2.669,19.414-7.994l38.83-38.828L434.539,137.33 c5.325-5.33,7.994-11.802,7.994-19.417C442.537,110.302,439.864,103.829,434.539,98.499z"/> </g> </svg> </figure> </td> </tr> </template> <script> const renkler = { "black": "#000000", "darkslategray": "#2f4f4f", "dimgray": "#696969", "gray": "#808080", "slategray": "#708090", "lightslategray": "#778899", "darkgray": "#a9a9a9", "silver": "#c0c0c0", "lightgray": "#d3d3d3", "gainsboro": "#dcdcdc", "whitesmoke": "#f5f5f5", "ghostwhite": "#f8f8ff", "snow": "#fffafa", "white": "#ffffff" }; const renkTemplate = document.getElementById("renk-template"), renkTablo = document.querySelector(".renk-tablo"), renkTabloTbody = renkTablo.querySelector("tbody"); for (let renkAd in renkler) { const renkDeger = renkler[renkAd], renkTemplateOrnek = document.importNode(renkTemplate.content, true); //şablon örneği renkTemplateOrnek.querySelector(".renk-ad").textContent = renkAd; renkTemplateOrnek.querySelector(".renk-deger").textContent = renkDeger; renkTemplateOrnek.querySelector(".renk-ornek").style.fill = renkDeger; console.log(renkTemplateOrnek.querySelector(".renk-ornek")); renkTabloTbody.appendChild(renkTemplateOrnek); //ilgili tabloya doldur } </script> </body> </html> |
Kaynak:
http://x-tag.github.io
https://www.blustemy.io/using-the-html-template-element/
https://www.w3schools.com/tags/tag_template.asp
Yorum Yap