Intro
This document details the available options of invoking ZPT-JS to update the DOM of the web pages. The preload command is not covered here, take a look at macros and at i18n to view some examples about this command.
The fullRender command
The fullRender is the only mandatory command you must use. When you invoke it ZPT-JS locates the root provided by the command and looks for all the custom attributes related to ZPT-JS. Then ZPT-JS does the corresponding action of each found attribute.
An example of fullRender:
"use strict"; var zpt = require( 'zpt' ); var dictionary = { ... }; // Parse template zpt.run({ root: document.body, dictionary: dictionary, command: 'fullRender' });
This is exactly equivalent to the next example (without setting command, fullRender is the default command):
"use strict"; var zpt = require( 'zpt' ); var dictionary = { ... }; // Parse template zpt.run({ root: document.body, dictionary: dictionary });
The partialRender command
Sometimes we need to render some DOM elements several times, but not the whole root element. This can be done this way using the partialRender command and defining a target element instead of a root:
"use strict"; var zpt = require( 'zpt' ); var dictionary = { ... }; // First execution: render the body zpt.run({ root: document.body, dictionary: dictionary }); [ your code here ] // Second execution: render only some elements zpt.run({ command: 'partialRender', target: [ document.getElementById( 'id1' ), document.getElementById( 'id2' ) ] });
The update command
ZPT-JS provides an alternative to partialRender command: the update command. With this command ZPT-JS updates the DOM inside the root element depending on some changes in the dictionary. To do this ZPT-JS builds an index with data about the expressions and attributes to know the parts of the DOM to update. Let's see an example:
"use strict"; var zpt = require( 'zpt' ); var dictionary = { ... }; // First execution: render the body zpt.run({ root: document.body, dictionary: dictionary }); [ your code here ] // Second execution: update the DOM zpt.run({ command: 'update', dictionaryChanges: { ... } });
ZPT-JS also updates the dictionary with the values in dictionaryChanges. It is shallow copy, not a deep copy.