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 = { message: "Hello, world!" }; // 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 = { message: "Hello, world!" }; // Parse template zpt.run({ root: document.body, dictionary: dictionary });
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 = { message: "Hello, world!" }; // 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: { message: "Bye, world!" } });
ZPT-JS also updates the dictionary with the values in dictionaryChanges. It is shallow copy, not a deep copy.
Invoking update command updating a reactive dictionary
ZPT-JS provides a special type of object, the reactive dictionary. Defines a dictionary with reactive capabilities: it can detect some type of modifications done to it and invoke an update command immediately.
"use strict"; var zpt = require( 'zpt' ); var dictionary = new zpt.ReactiveDictionary({ message: "Hello, world!" }); // First execution: render the body zpt.run({ root: document.body, dictionary: dictionary }); [ your code here ] // Second execution: update the dictionary and ZPT will update HTML dictionary.message = "Bye, world!";
For more details about reactive dictionaries go to its reference page.
The partialRender command
Another alternative command to render again some DOM elements several times is the partialRender command and defining a target element instead of a root:
"use strict"; var zpt = require( 'zpt' ); var dictionary = { message: "Hello, world!" }; // 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' ) ] });
You can use this command if you prefer to use a custom object and you don't want to use the ReactiveDictionary
.