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 can be defined as a configuration option or using ZPT-JS as a jquery plugin, but if the root is an array it can be only defined as a configuration option.

The first invokation of ZPT using ZPT-JS as a jquery plugin makes ZPT-JS uses the selection as the root. 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:

"use strict";

var zpt = require( 'zpt' );

var dictionary = {
    ...
};

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

Using ZPT as a jquery plugin:

"use strict";

var zpt = require( 'zpt' );

var dictionary = {
    ...
};

// Parse template
$( '#id1' ).zpt({
    dictionary: dictionary
});
                

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

"use strict";

var zpt = require( 'zpt' );

var dictionary = {
    ...
};

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

Using ZPT as a jquery plugin using all the body:

"use strict";

var zpt = require( 'zpt' );

var dictionary = {
    ...
};

// Parse template
$( 'body' ).zpt({
    dictionary: dictionary
});