ZPT-JS reference - Configuration - root

Syntax

root         ::= root_element || Array of root_element
root_element ::= a DOM node
                

Description

The root is used to define the node or nodes where ZPT-JS will search its custom attributes in a full render. It can be a simple DOM node or an array of DOM nodes. It is mandatory to set at least a root element the first time ZPT-JS is invoked.

It must be defined as a configuration option.

The root defines the limits of the DOM where ZPT-JS will work.

Next invokations makes ZPT-JS uses the selection as the root when the command is a full render. If the command is a partial render then the selection will work as the target. The target defines the limits of the update, but a previous definition of the root is needed by ZPT-JS.

Examples

Using the configuration option:

import { zpt } from './zpt-esm.js';

var dictionary = {
    ...
};

// Parse template
zpt.run({
    root: document.getElementById( 'id1' ),
    dictionary: dictionary
});
                

Using an array as a configuration option (the only way):

import { zpt } from './zpt-esm.js';

var dictionary = {
    ...
};

// Parse template
zpt.run({
    root: [
        document.getElementById( 'id1' ),
        document.getElementById( 'id2' ),
    ]
    dictionary: dictionary
});