Templates API

tpl.component()

async

Passes template element data to the specified components and executes those components.

  • Accepts the template name, as a string, as the first argument.
    The second argument can be either a component name as a string or an object where keys are component names and values are the data that the specified component will accept.
    Accepts an optional third argument, which can be one of the following:
    Type
    Description
    object
    The template elements whose values match those specified in the object (case-insensitive) or match a regular expression defined in the object will be passed to the component.
    array
    The template elements whose indexes match the specified numbers from the array will be passed to the component.
    number
    The template element whose index corresponds to the specified number will be passed to the component.
  • The first argument passed to the component is an array of objects, each of which has the following properties:
    Property
    Type
    Description
    it
    DOM element
    The template element.
    data
    object
    The data of the current template element.
    The second argument passed to the component is the data specified when calling the method, or null if no data was provided.
  • Returns the value returned by the component when calling a single component, or an object where the keys are the component names and the values are the corresponding return values of those components.
  • It is not necessary to wait for the method to be executed using await if not needed.
Example:
await tpl.component();
// false

await tpl.component('tplName');
await tpl.component('tplName', 'component_1', 99);
// null

// Passes all template elements to "component_1".
await tpl.component('tplName', 'component_1');
// The return value of "component_1".

// Passes the template element at index 0 to the "component_1".
await tpl.component('tplName', 'component_1', 0);
// The return value of "component_1".

/*
   Passes template elements with a 'name' property equal to 'cat' 
   to "component_1" and "component_2", along with the respective data for each.
*/
await tpl.component('tplName', {component_1: 'book', component_2: null}, {name: 'cat'});
/*
{
   component_1: 'The return value of "component_1".',
   component_2: 'The return value of "component_2".'
}
*/
Previous tpl.pos() Next cookie.get()