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 });