20
تشکر

معرفی تگ template در HTML5

اچ تی ام ال 5 - HTML5

اچ تی ام ال 5 – HTML5

وب اپلیکیشن های به روز با استفاده از دستکاری DOM یا همان ساختار درختی صفحه HTML، تغییرات خودشان را در صفحه اعمال میکنند. برای مثال یک جدول را در نظر بگیرید. قرار است ما اطلاعات مورد نظرمان را بوسیله Ajax از سرور دریافت و درون این جدول نمایش دهیم. این اطلاعات باید به جدول متصل شوند. اما چگونه؟ توسعه دهندگان دو راه حل پیش رو دارند:

1- با استفاده از جاوا اسکریپت تگ های DOM را درون رشته ساخته و سپس به صفحه اضافه میکنند. اینکار آسان به نظر میرسد، اما این روش مشکل امنیتی دارد و اجرای حملات XSS بیشتر میشود. بعضی از توسعه دهندگان هم برای اینکه کار ساده‌تر شود کل HTML را با Ajax می‌فرستند که باعث می‌شود حجم داده‌ها خیلی زیادتر از قبل شود.

2- راه حل دیگر ایجاد یک سطر خالی درون HTML است که به عنوان یک Template مورد استفاده قرار بگیرد. که البته باید آن را از دید کاربر خارج کنید. در این روش با اینکه همه چیز از دید کاربر مخفی است اما باز هم درخواست های HTTP که ممکن است درون آن وجود داشته باشد، انجام میشوند.

هیچ کدام از دو راه حل روش استانداردی نبودند، تا زمانیکه HTML5 تگ جدیدی به نام template را معرفی کرد. با استفاده از تگ template شما میتوانید یک تمپلیت یا prototype برای ساختار DOM خود ایجاد کنید.

در ادامه همراه ما باشید…

تشخیص پشتیبانی مرورگر

برای تشخیص اینکه آیا مرورگر از تگ template پشتیبانی میکند یا خیر باید خاصیت content را درون آن جستجو کنیم.

function supportTemplate() {
  return 'content' in document.createElement('template');
};

if(supportTemplate()) {
  //Supported
} else {
  //Not supported
}

ساختار template

تگ template میتواند هر جای صفحه، head, body یا حتی درون frameset قرار بگیرد. با این حال:

1- template به کاربر نمایش داده نمیشود.

2- template بخشی از DOM در نظر گرفته نمیشود. برای مثال متد getElementById فرزندان template را برنمیگرداند.

3- template یک تگ غیرفعال است. برای مثال تصاویر درون آن دانلود نمیشود، اسکریپت های درون آن اجرا نمیشوند و به همین صورت.

نحوه فعالسازی template به این صورت است که ابتدا باید عناصر داخل template را مقداردهی کنیم سپس از روی آن‌ها یکی بسازیم (clone کنیم) که اینکار توسط متد importNode انجام می‌شود، و سپس در مکان دلخواه خود در DOM قرار دهیم.

برای مثال در زیر ما یک لیست خالی و یک template داریم و همچنین یک دکمه که هر بار کاربر روی آن کلیک کند یک لیست از طریق تمپلیت اضافه میشود.

<button onclick="addList()">Add</button>
<ul id="list">

</ul>

<template id="list-template">
  <li></li>
  <script>alert('added');</script>
</template>

و کد جاوا اسکریپت:

var i = 0;
function addList() {
  var list = document.getElementById('list');
  var template = document.getElementById('list-template').content;
  
  var li = template.querySelector('li');
  li.textContent = 'List num.' + ++i;
  list.appendChild(document.importNode(template, true));
  
};

مشاهده دمو

  • طراحی سایت می‌گه:

    ممنون از مطالب خوبتون. منتظر مطالب جدیدتر هستیم…

  • رضا می‌گه:

    سلام داش محسن
    لطفا درباره pie توضیح بدید
    اینم سایتش
    http://css3pie.com/
    ممنون
    رضا طاهری

  • Ali Amini می‌گه:

    سلام خدمت آقا محسن گل
    واقعا اینجا تکه؛
    خیلی مطالب کاربردی داره.
    واقعا دستت درد نکنه.
    وقت کردم همه ی صفحات آپارنت رو میخونم.
    در پناه حق موفق و پیروز باشی؛ یا علی

  • دانیال می‌گه:

    سلام
    سایتتون بهترین سایت در ضمینه ی طراجی وبه.
    چون بیشتر سایت ها اموزش طراحی وب بیشتر اموزش ابزار ها داده می شه تا طراحی وب.

  • رضا می‌گه:

    سلام و خسته نباشید
    واقعا بهترین سایت فناوری های وبی
    دستت هم درد نکنه
    بازم مطالب مفید و حرفه ای بزار
    ممنون
    رضا طاهری


  • نظرات این مطلب بسته است.