Template elementi

O’rnatilgan <template> elementi HTML markup shablonlari uchun saqlash joyi vazifasini bajaradi. Brauzer uning mazmunini e’tiborsiz qoldiradi, faqat sintaksis to’g’riligini tekshiradi, lekin biz JavaScript-da unga kirishimiz va boshqa elementlar yaratish uchun ishlatishimiz mumkin.

Nazariy jihatdan, biz HTML markup saqlash maqsadlari uchun HTML da istalgan ko’rinmas elementni yaratishimiz mumkin edi. <template>ning nima maxsus tomoni bor?

Birinchidan, uning mazmuni har qanday to’g’ri HTML bo’lishi mumkin, hatto u odatda to’g’ri o’ralgan tegni talab qilsa ham.

Masalan, biz u yerga jadval qatori <tr>ni qo’yishimiz mumkin:

<template> <tr> <td>Mazmun</td> </tr> </template>

Odatda, agar biz <tr>ni, aytaylik, <div> ichiga qo’yishga harakat qilsak, brauzer noto’g’ri DOM tuzilmasini aniqlaydi va uni “tuzatadi”, atrofiga <table> qo’shadi. Bu biz xohlagan narsa emas. Boshqa tomondan, <template> biz u yerga qo’ygan narsani aynan saqlaydi.

Biz <template> ichiga uslublar va skriptlarni ham qo’yishimiz mumkin:

<template> <style> p { font-weight: bold; } </style> <script> alert("Salom"); </script> </template>

Brauzer <template> mazmunini “hujjatdan tashqarida” deb hisoblaydi: uslublar qo’llanilmaydi, skriptlar ishga tushmaydi, <video autoplay> ishlamaydi va hokazo.

Mazmun uni hujjatga kiritganimizda jonli bo’ladi (uslublar qo’llaniladi, skriptlar ishlaydi va hokazo).

Template kiritish

Shablonning mazmuni uning content xususiyatida DocumentFragment sifatida mavjud – DOM tugunining maxsus turi.

Biz uni har qanday boshqa DOM tuguni kabi ko’rib chiqishimiz mumkin, bitta maxsus xususiyatdan tashqari: uni biror joyga kiritganimizda, uning bolalari o’rniga kiritiladi.

Masalan:

<template id="tmpl"> <script> alert("Salom"); </script> <div class="message">Salom, dunyo!</div> </template> <script> let elem = document.createElement('div'); // Shablonning mazmunini bir necha marta qayta ishlatish uchun klonlash elem.append(tmpl.content.cloneNode(true)); document.body.append(elem); // Endi <template>dan skript ishlaydi </script>

Oldingi bobdan Shadow DOM misolini <template> yordamida qayta yozaylik:

<template id="tmpl"> <style> p { font-weight: bold; } </style> <p id="message"></p> </template> <div id="elem">Meni bosing</div> <script> elem.onclick = function() { elem.attachShadow({mode: 'open'}); elem.shadowRoot.append(tmpl.content.cloneNode(true)); // (*) elem.shadowRoot.getElementById('message').innerHTML = "Soyalardan salom!"; }; </script>

(*) satrida biz tmpl.contentni klonlab va kiritganimizda, u DocumentFragment bo’lgani uchun, uning bolalari (<style>, <p>) o’rniga kiritiladi.

Ular soya DOM ni hosil qiladi:

<div id="elem"> #shadow-root <style> p { font-weight: bold; } </style> <p id="message"></p> </div>

Xulosa

Xulosa qilib aytganda:

• <template> mazmuni har qanday sintaktik jihatdan to’g’ri HTML bo’lishi mumkin.
• <template> mazmuni “hujjatdan tashqarida” hisoblanadi, shuning uchun u hech narsaga ta’sir qilmaydi.
• Biz JavaScript-dan template.contentga kirishimiz mumkin, uni yangi komponentda qayta ishlatish uchun klonlashimiz mumkin.

<template> tegi juda noyob, chunki:

• Brauzer uning ichidagi HTML sintaksisini tekshiradi (skript ichidagi shablon satridan foydalanishdan farqli o’laroq).
• …Lekin baribir har qanday yuqori darajadagi HTML teglaridan foydalanishga imkon beradi, hatto to’g’ri o’rashsiz ma’noga ega bo’lmagan teglar ham (masalan, <tr>).
• Mazmun interaktiv bo’ladi: skriptlar ishlaydi, <video autoplay> ijro etiladi va hokazo, hujjatga kiritilganda.

<template> elementi hech qanday iteratsiya mexanizmlari, ma’lumotlarni bog’lash yoki o’zgaruvchilarni almashtirish xususiyatlariga ega emas, lekin biz ularni uning ustiga amalga oshirishimiz mumkin.