HTML5 template Elementi Kullanımı – Tasarım Kodlama
HTML

HTML5 template Elementi Kullanımı

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:

Sonra belgeye üç sütunlu bir tablo ekliyorum. <tbody> şimdilik boş. Şablonun örneklerini içerecektir.

Ş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.

Şimdi  birkaç değişken daha hazırlayabiliriz. Değerleri değiştirmeyeceğim için ES6 sabitlerini burada kullanıyorum.

Ardından, şablonun örneğini doldurmak için örnek nesnesinin boyutunda bir döngü çalıştırılır:

Ornek.html

Çıktı:

 

<template> öğesini kullanma

Önemli olan, şablon içeriğini, elemanları içe aktararak klonlamaktır:

İ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.

Bu, bir <iframe> öğesinden düğüm alma işlemine çok benzer. DOM API’nin bu işlevleri hakkındaki dokümantasyon sayfaları:

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

 

 

 

Kaynak:

http://x-tag.github.io

https://www.blustemy.io/using-the-html-template-element/

https://www.w3schools.com/tags/tag_template.asp

 

 

 

Yorum bırak