Getting started

Downloading ZPT-JS and its dependencies

Go to Download section and follow the instructions to download ZPT-JS and its dependencies.

Configuring the HTML header

You must add to your web page the javascript code of ZPT-JS and its dependencies(zpt.min.js). Don't forget to add the reference of the javascript file with the invokation to ZPT-JS (for example gettingStarted.js):

<head>
    ...
    <script src="zpt.min.js" type="text/javascript" defer></script>
    <script src="gettingStarted.js" type="text/javascript" defer></script>
    ...
</head>

Write the template

Customize the body of your HTML document with some of the provided by ZPT-JS statements. One of these is data-content:

<body>
    <p data-content="message">
        the message
    </p>
</body>

The resulting HTML document is:

<!DOCTYPE html>
<html> 
    <head>
        <meta charset="utf-8">
        <title>Getting started</title>

        <script src="/zpt/zpt.min.js" defer></script>
        <script src="gettingStarted.js" type="text/javascript" defer></script>
    </head>
    <body>
        <p data-content="message">
            the message
        </p>
    </body>
</html>

Build the dictionary

Build a javascript object with key/value pairs. These key/value pairs will be accesible by the whole template. You can use any javascript object, but ZPT provides an specific type that supports a reactive behaviour:

var dictionary = new zpt.ReactiveDictionary({
    message: "Hello, world!"
});

Invoke ZPT-JS

Invoke the run method of ZPT:

var zpt = require( 'zpt' );

...

zpt.run({
    root: document.body,
    dictionary: dictionary
});

The resulting Javascript file (gettingStarted.js) is:

"use strict";

var zpt = require( 'zpt' );

var dictionary = new zpt.ReactiveDictionary({
    message: "Hello, world!"
});

zpt.run({
    root: document.body,
    dictionary: dictionary
});

That's all!

The result

The resulting body element is:

<body>
    <p data-content="message">
        Hello, world!
    </p>
</body>

Updates

If we change some data in the dictionary this way:

dictionary.message = "Bye, world!";

We don't need to do anything else, the body element now is:

<body>
    <p data-content="message">
        Bye, world!
    </p>
</body>

The data-content attribute is ignored by browsers: all the data-* attributes are completely ignored by the user agent.

Using ZPT-JS and node.js

That's OK. But... how can we use ZPT-JS at the server side (using node.js)? jsdom is needed when no browser is available:

"use strict";

var jsdom = require( 'jsdom' );
var { JSDOM } = jsdom;

// Build JSDOM instance
var dom = new JSDOM(
    '<!doctype html>'
	+ '<html>'
	+ '<body><h1 data-content="'hello, world!'">a text</h1></body>'
	+ '</html>'
);

// Init some important vars
var window = dom.window;
var document = window.document;
global.window = window;

// Parse template
var zpt = require( 'zpt' );
zpt.run({
    root: document.body,
    dictionary: {}
});

console.log( 'Done!' );

ZPT-JS tutorial - Getting started