Chapter 26: HTML Templates: പുനരുപയോഗത്തിന് അനുയോജ്യമായ ഉള്ളടക്ക ബ്ലോക്കുകൾ (HTML 

HTML <template> ടാഗ് എന്താണ്?

HTML <template> ടാഗ് വെബ്ബ് ഡോക്യുമെന്റിൽ പ്രദർശിപ്പിക്കപ്പെടാത്ത (hidden) HTML ഫ്രാഗ്മെന്റുകൾ സൃഷ്ടിക്കാൻ ഉപയോഗിക്കുന്നു. ഈ ടാഗ് ഒരു വെബ്ബ് പേജിൽ കാണിക്കപ്പെടുന്നില്ല, പക്ഷേ JavaScript ഉപയോഗിച്ച് ആവശ്യമായ സമയത്ത് ഇത് പ്രദർശിപ്പിക്കാനാകും. ഇത് ആവർത്തിച്ച് ഉപയോഗിക്കേണ്ട HTML ഘടകങ്ങളെ സൃഷ്ടിക്കുന്നതിന് വളരെ പ്രായോഗികമായ മാർഗമാണ്.

HTML <template> ടാഗിന്റെ ഘടന:

 code<template id="my-template">
  <h2>ഇത് ഒരു പുനരുപയോഗ സാധ്യമുള്ള ബ്ലോക്കാണ്</h2>
  <p>JavaScript ഉപയോഗിച്ചാണു ഇത് പ്രദർശിപ്പിക്കുന്നത്.</p>
</template>

Example:

 code<template id="product-template">
  <div class="product">
    <h2>ഉൽപ്പന്നത്തിന്റെ പേര്</h2>
    <p>ഉൽപ്പന്നത്തിന്റെ വിവരണം ഇവിടെ.</p>
  </div>
</template>

എങ്ങനെ <template> പ്രവർത്തിക്കുന്നു?

<template> ടാഗിനുള്ളിലെ ഉള്ളടക്കം ഉപയോക്താക്കൾക്ക് നേരിട്ട് കാണാനാകില്ല. ഇത് JavaScript ഉപയോഗിച്ച് clone ചെയ്ത്, ഒരു പേജിൽ പ്രദർശിപ്പിക്കാനാകും.

JavaScript ഉപയോഗിച്ച് Template പ്രദർശിപ്പിക്കുക:

JavaScript ഉപയോഗിച്ച് <template>-ന്റെ ഉള്ളടക്കം പേജിൽ കാണിക്കാം.

 code<template id="my-template">
  <h2>ഇത് ഒരു പുനരുപയോഗ സാധ്യമുള്ള ബ്ലോക്കാണ്</h2>
  <p>ഇത് ടെംപ്ലേറ്റിൽ ഉള്ള ഉള്ളടക്കമാണ്.</p>
</template>

<script>
  const template = document.getElementById("my-template");
  const content = document.importNode(template.content, true);
  document.body.appendChild(content);
</script>

ഈ ഉദാഹരണത്തിൽ, JavaScript ഉപയോഗിച്ച് <template>-ലുള്ള ഉള്ളടക്കം പേജിൽ clone ചെയ്ത് ചേർക്കുന്നു.

HTML <template> ടാഗ് ഉപയോഗിക്കാനുള്ള സാധാരണ പ്രയോഗങ്ങൾ:

1. പുനരുപയോഗിക്കാവുന്ന സെക്ഷനുകൾ:പലവട്ടം ആവർത്തിച്ചു ഉപയോഗിക്കേണ്ട സെക്ഷനുകൾ, ഉൽപ്പന്ന ലിസ്റ്റുകൾ, ഉപയോക്തൃ അഭിപ്രായങ്ങൾ തുടങ്ങിയവ കൈകാര്യം ചെയ്യുന്നതിനായി ടെംപ്ലേറ്റുകൾ ഉപയോഗിക്കുന്നു.
2. Dynamic Content Rendering (ഡൈനാമിക് ഉള്ളടക്കം):JavaScript ഉപയോഗിച്ച് ഡാറ്റയെ അടിസ്ഥാനമാക്കി ഒരു HTML പേജിൽ ഡൈനാമിക് ഉള്ളടക്കം പ്രദർശിപ്പിക്കാനാകും.htmlCopy code<template id="item-template"> <li class="item"> <h3>Item Title</h3> <p>Item description.</p> </li> </template> javascriptCopy codeconst data = [ { title: 'Item 1', description: 'Description of Item 1' }, { title: 'Item 2', description: 'Description of Item 2' }, ]; const template = document.getElementById('item-template'); const list = document.querySelector('ul'); data.forEach(item => { const clone = document.importNode(template.content, true); clone.querySelector('h3').textContent = item.title; clone.querySelector('p').textContent = item.description; list.appendChild(clone); });
3. Single Page Applications (SPA):SPAs-ൽ, തൽക്ഷണ ഡൈനാമിക് ഉള്ളടക്കം മാറ്റേണ്ട സമയത്ത് <template> ടാഗ് ഉപയോഗിച്ച് ഉപയോഗപ്രദമായ കട്ടകൾ സൃഷ്ടിക്കാം.

Template Tag Structure (ടാഗിന്റെ ഘടന):

<template>-ലിൽ HTML-ന്റെ സാധാരണ ഘടകങ്ങൾ ഉൾപ്പെടുത്താം, എന്നാൽ ഇവ JavaScript ഉപയോഗിക്കാതെ പുറത്തു കാണിക്കുകയില്ല. ലേഔട്ടുകൾ, ടെക്സ്റ്റ്, ഫോമുകൾ, ചിത്രങ്ങൾ, ടേബിളുകൾ തുടങ്ങിയവ ഉൾപ്പെടുത്താം.

 code<template id="form-template">
  <form>
    <label for="name">പേര്:</label>
    <input type="text" id="name" name="name">
    <button type="submit">സമർപ്പിക്കുക</button>
  </form>
</template>

HTML <template>-യുടെ പ്രധാന ഗുണങ്ങൾ:

1. പുനരുപയോഗക്ഷമത (Reusability): HTML ബ്ലോക്കുകൾ പുനരുപയോഗിക്കാൻ കഴിയും, അതിനാൽ താൽക്കാലിക ക്ലോണുകൾ JavaScript വഴി എളുപ്പത്തിൽ സൃഷ്ടിക്കാം.
2. അധികാരം (Efficiency): ആവർത്തിച്ചുള്ള HTML കോഡ് ഒഴിവാക്കുന്നു, അതിനാൽ അത് എളുപ്പമായി clone ചെയ്യാം.
3. സ്വച്ഛമായ കോഡ് (Clean Code): പുനരുപയോഗിക്കാവുന്ന കോഡുകൾ HTMLയിൽ ഒരു സെമാന്റിക് ഫോർമാറ്റിൽ സംഭരിക്കാം.
4. ലോജിക് വേർതിരിക്കൽ: HTML ലേഔട്ടും JavaScript ലോജിക്കും വളരെ വേദ്യമായി വേർതിരിച്ച് പ്രവർത്തിക്കും.

Template Tag Styling:

HTML <template>-ലുള്ള ഉള്ളടക്കത്തിന് CSS ഉപയോഗിച്ച് styling നൽകാം, clone ചെയ്ത ശേഷം.

code.product {
  border: 1px solid #ccc;
  padding: 10px;
  margin: 10px;
}

HTML <template>-നുള്ള പരിമിതികൾ:

1. Direct Rendering ഇല്ല: <template>-ലുള്ള ഉള്ളടക്കം ബ്രൗസറിൽ നേരിട്ട് കാണുന്നില്ല.
2. JavaScript നിഷ്ക്രിയത: Template-നെ പ്രദർശിപ്പിക്കാൻ JavaScript ഉപയോഗിച്ചേ കഴിയൂ, അതിനാൽ ഇതിന് JavaScript പരിജ്ഞാനം ആവശ്യമാണ്.

---

സങ്കലനം:

HTML <template> ടാഗ് വെബ്ബ് പേജുകളിൽ പുനരുപയോഗിക്കാവുന്ന HTML ബ്ലോക്കുകൾ സൃഷ്ടിക്കാൻ സഹായിക്കുന്നു. ഇത് UI ഘടനകൾ ആവർത്തിച്ചു പ്രദർശിപ്പിക്കാൻ, ഡൈനാമിക് ഡാറ്റകൾക്കൊപ്പം ഉപയോഗിക്കാൻ, SPA യിൽ ഘടകങ്ങൾ മാറ്റാനുമുള്ള മികച്ച മാർഗമാണ്.