Templates API

Overview

To work with dynamic content based on templates, built-in methods can be used, along with appropriate HTML markup, where variables are enclosed between ${ and } symbols, and the template name is specified in the data-name attribute.

Example HTML markup for a simple template:

<template data-name="tplName">
   <li class="list ${newClass}" id="${id}">${name} – ${date}</li>
</template>

A template does not have to contain only one child element.
If the ${ symbols are needed in the text, simply escape them with a backslash \.
If an attribute starts with ${ and is not a variable, it is enough to escape the entire attribute by placing backslash \ at the beginning before ${.

Example HTML markup with escaping and multiple child elements:

<template data-name="tplName">
   <h1>${title}</h1>
   <p data-values='\${Name} ${Book}'>\${Name} \${Book}</p>
</template>

To specify the block where the elements of a template will be displayed, it is enough to set the data-tpl attribute with the template name as its value.

Example of HTML markup for a block containing template elements:

<div data-tpl="tplName"></div>

To place template elements immediately after the page is loaded, or upon initialization and content changes, the data-set attribute can be used with data for the template elements.

Example of HTML markup with preset values:

<!-- To place a single template element. -->
<div data-tpl="tplName" data-set="{name: 'book', type: 1}"></div>

<!-- To place a single empty template element. -->
<div data-tpl="tplName" data-set></div>

<!-- To place several template elements. -->
<div data-tpl="tplName" data-set="[{name: 'book', type: 1}, {name: 'book 2', type: 2}]"></div>

When creating multiple blocks with the same template name, all elements in them will be linked and will always be the same when managed via the API interface.
To use the same template in different blocks but manage them separately, a compound name consisting of the template name, a separator ":", and an additional identifier can be used.

Example of HTML markup for a block with a compound name referring to the "tplName" template:

<div data-tpl="tplName:second"></div>

When using templates via the API interface, the "inert" attribute is automatically removed from the block containing the template elements if it contains at least one element, and set if it does not contain any elements.
The data-tpl-alt attribute with the template name can be used to display an alternate block when the main block is hidden.
This alternate block will have the "inert" attribute if there is at least one element in the main block.
To control the display of blocks, assign the necessary CSS styles to the relevant attributes.

Example of HTML markup for an alternate block:

<div data-tpl-alt="tplName">No elements are present.</div>

Example of CSS styles for controlling the display of blocks:

/* Common styles for all elements with "inert". */
[inert] {
   display: none; /* or any other styles */
}

/* Styles for all template blocks with "inert". */
[data-tpl][inert],
[data-tpl-alt][inert] {
   display: none; /* or any other styles */
}

/* Styles for a specific template block with "inert". */
[data-tpl="tplName"][inert],
[data-tpl-alt="tplName"][inert] {
   display: none; /* or any other styles */
}

Templates can be used with unlimited nesting within each other using the data-tpl and data-tpl-alt attributes.

Example of HTML markup with nested templates:

<div data-tpl="tplName" inert></div>
<div data-tpl-alt="tplName">No elements are present.</div>

<template data-name="tplName">
   <div data-id="${id}"> 
      <h1>${name} – ${date}</h1>
      <div data-tpl="tplSecond" inert></div>
      <div data-tpl-alt="tplSecond">No types are present.</div>
   </div>
</template>

<template data-name="tplSecond">
   ${type}
   <div data-tpl="tplThird" inert></div>
   <div data-tpl-alt="tplThird">No descriptions are present.</div>
</template>

<template data-name="tplThird">
   ${description}
</template>

Nested template names can be assigned via variables, and the data-set attribute can be used to place elements at once.

Example of HTML markup with a variable template name and preset values:

<template data-name="tplName">
   <div data-id="${id}"> 
      <div data-tpl="${newTpl}" data-set="{name: 'book', type: 1}"></div>
      <div data-tpl-alt="${newTpl}">No elements are present.</div>

      <div data-tpl="${newTplSecond}" data-set="${setVariable}"></div>
      <div data-tpl-alt="${newTplSecond}">No elements are present.</div>
   </div>
</template>

Previous readFile() Next tpl.add()