Dynamic Application API

content()

async

Updates the contents of DOM elements dynamically based on data fetched from an API request.

Accepts an optional object with the following properties:

Property

Type

Description

api

object

The object to be used for making the API request.
More details about the API object can be found in the documentation for the api() interface.

update

object
array
DOM element

An object where the keys represent the property names from the API response whose content needs to be output, and the values are the DOM elements relative to which this content should be output.
If the content is nested, dot notation can be used to access the desired content, such as "response.user.name".
An array of DOM elements, relative to which the content will be output if the request returns content immediately.
A DOM element relative to which the content will be output if the request returns content immediately.
If a property is not specified or is null, DOM elements with "data-it" attributes will be used as placeholders for replacement. The values of these attributes should match the keys from the API response, such as "data-it="name"" or "data-it="response.user.name"".
If a <head> element is specified for content replacement, it will be automatically disassembled and reassembled to avoid visual breaks.
Existing CSS styles will remain intact and will not be duplicated, even if they are present in the replacement data.

loader

DOM element
array

The element or an array of elements that handles the loaders.
For the specified element, the aria-busy="true" attribute will be automatically set during the request and changed to aria-busy="false" once the request is complete.
To control the display of blocks, assign the necessary CSS styles to the relevant attributes.

mode

string
object
boolean

If content needs to be replaced, it must be false.
Otherwise, it must be one of the following values, indicating where the content will be output:

Argument

Description

'before'

Places the content before the matched DOM element (before the opening tag).

'after'

Places the content after the matched DOM element (after the closing tag).

'begin'

Places the content immediately after the matched DOM element's opening tag (before the first child).

'end'

Places the content right before the matched DOM element's closing tag (after the last child).

If multiple blocks change simultaneously, specifying this option as a string applies it to all blocks.
To assign a specific option to each block, use an object, e.g., {main: 'end', 'response.user.name': false}.
If this property is specified and not set to false, DOM elements with the "data-remove" attribute matching existing DOM elements will be removed.
This is useful for scenarios such as adding new content and removing outdated elements, like replacing old pagination with updated content.
The default value is false.

scroll

object
boolean

The object to use for scrolling.
More details on the scroll object can be found in the documentation for the toScroll() method.
To specify the DOM element that needs to be scrolled, the "it" property can be used.
If true, scrolling will be done to the top with default settings.
The default value is false.

spa

string
boolean

The key of the object used from the "spa" property in the "config.js" configuration file, if explicit page navigation should be specified without reloading; otherwise, it is false.
The default value is false.

All properties are optional.
The "api" property is taken from a property of the "spa" object in the "config.js" configuration file if it is not explicitly specified.
Returns the data from the request if the content is successfully updated; otherwise, returns false.
It is not necessary to wait for the method to be executed using await if not needed.

Example:

// The data will be taken from the configuration object.
await content();

/*
   Replaces the content of blocks containing "data-it" attributes with values 
   that correspond to the keys in the object returned by the request.
*/
await content({
   api: {
      url: '/api',
      method: 'POST',
      body: {
         method: 'getBook',
         id: 1
      },
      format: 'json'
   }
});

/*
   The missing properties of the "api" property are taken 
   from the "api" object in the "config.js" configuration file.
*/
await content({
   api: {
      body: {
         method: 'getBook',
         id: 1
      }
   }
});

/*
   The "update" property is specified as an object 
   if the request returns an object with "main" and "head" properties.
*/
await content({
   api: {
      url: '/api',
      method: 'POST',
      body: {
         method: 'getBook',
         id: 1
      },
      format: 'json'
   },
   update: {
      main: $('#app'),
      head: $('head')
   },
   loader: $it.myLoader,
   mode: {
      main: 'end',
      head: false
   }
});

/*
   The "update" property is specified as a DOM element or an array of DOM elements 
   if the request immediately returns output data.

   The "mode" property specifies that the data will be appended to the end of the DOM element, 
   rather than completely replacing its content.

   The "scroll" property specifies the DOM element to be scrolled along with the options to be applied.
*/
await content({
   api: {
      url: '/api',
      method: 'POST',
      body: {
         method: 'getBook',
         id: 1
      },
      format: 'text'
   },
   update: $('#app'),
   loader: $it.myLoader,
   mode: 'end',
   scroll: {
      it: $('#app'),
      target: null,
      speed: 200,
      type: 'smooth',
      align: 'top',
      offset: 0,
      axis: 'Y'
   }
});

Previous api() Next init()