Getting Started
Single-page application
If the "spa" property is enabled in the configuration file, the application supports seamless navigation without full page reloads.
This feature allows for dynamic content and URL updates in the address bar.
When updating the URL to a similar one, it does not create duplicates but instead refreshes the data associated with the current URL.
Navigation occurs only when interacting with <a> DOM elements that meet the following conditions:
It can be combined with the "data-remove" attribute to seamlessly replace old content with new content, ensuring a smooth and efficient user experience.
Navigation-related <a> DOM elements follow the settings defined in the configuration file.
However, their behavior can be customized for specific DOM elements by using the following attributes:
All attributes are optional and simply override values and behavior when needed.
This feature allows for dynamic content and URL updates in the address bar.
When updating the URL to a similar one, it does not create duplicates but instead refreshes the data associated with the current URL.
Navigation occurs only when interacting with <a> DOM elements that meet the following conditions:
- They have an "href" attribute whose value does not begin with "#".
- They do not have a "target" attribute.
- They do not have a "data-spa="false"" attribute.
It can be combined with the "data-remove" attribute to seamlessly replace old content with new content, ensuring a smooth and efficient user experience.
Navigation-related <a> DOM elements follow the settings defined in the configuration file.
However, their behavior can be customized for specific DOM elements by using the following attributes:
Attribute
Type
Description
data-spa
object
array
string
array
string
Triggers the specified components when the link is clicked.
If set to "false", the link will follow its default behavior.
Example: data-spa="false"
If set to "false", the link will follow its default behavior.
Example: data-spa="false"
data-spa-use
string
A string representing the key from the "spa" property in the configuration file that determines which object to use.
If omitted, the first object listed in the "spa" property is used by default.
Example: data-spa-use="second"
If omitted, the first object listed in the "spa" property is used by default.
Example: data-spa-use="second"
data-spa-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.
Example: data-spa-api="url: '/api', method: 'POST'"
More details about the API object can be found in the documentation for the api() interface.
Example: data-spa-api="url: '/api', method: 'POST'"
data-spa-update
object
array
DOM element
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 an attribute 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.
Example: data-spa-update="body: $('#view'), target: null"
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 an attribute 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.
Example: data-spa-update="body: $('#view'), target: null"
data-spa-loader
DOM element
array
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.
Example: data-spa-loader="$('#loader')"
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.
Example: data-spa-loader="$('#loader')"
data-spa-mode
string
object
boolean
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:
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 attribute 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.
Example: data-spa-mode="end"
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).
To assign a specific option to each block, use an object, e.g., {main: 'end', 'response.user.name': false}.
If this attribute 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.
Example: data-spa-mode="end"
data-spa-scroll
object
boolean
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.
Example: data-spa-scroll="speed: 300, it: $('#view'), target: null"
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.
Example: data-spa-scroll="speed: 300, it: $('#view'), target: null"