Getting started

Downloading ZPT-JS

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

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="gettingStarted.js" type="module"></script>
    </head>
    <body>
        <p data-content="message">
            the message
        </p>
    </body>
</html>

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

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:

import { zpt } from './zpt-esm.js';

var dictionary = {
    message: 'Hello, world!'
};

Invoke ZPT-JS

Invoke the run method of ZPT:

import { zpt } from './zpt-esm.js';

...

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

The resulting Javascript file (gettingStarted.js) is:

import { zpt } from './zpt-esm.js';

var dictionary = {
    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>

Partial rendering

If we change some data in the dictionary and run a partial render this way:

dictionary.message = 'Bye, world!';

zpt.run({
    command: 'partialRender',
    target: [ 
        document.body
    ]
});

The body element now is:

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

Updates

Another way of updating:

zpt.run({
    command: 'update',
    dictionaryChanges: {
        message: 'Bye again, world!'
    }
});

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

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