ZPT-JS

What is ZPT-JS

Zenon Page Templates - JS (ZPT-JS) is a Javascript API that makes it easy to modify the DOM of a HTML document with no Javascript programming, using only some custom attributes. ZPT-JS is a javascript implementation of Zope Page Templates (ZPT). It is not a fully compliant implementation: there are some differences. Take a look at Zope2 book to learn about Zope Page Templates.

Core features of ZPT-JS are:

Easy to learn; clean, simple and consistent syntax.
A rich and powerful group of expressions available (string, Jquery, logical, math, arrays, lists, ranges, function, method expressions...).
Don't break HTML! The HTML documents using ZPT-JS are valid HTML documents.
Makes it easy to designers maintain pages without having to abandon their tools.
Internal macro support; external asynchronous macro loading support.
I18n and L10n support using standards Intl and ICU. External asynchronous i18n files loading support.
ZPT-JS works as a reactive framework: you define an object with your data model. If you change some data ZPT-JS will make the minimum updates of the HTML to reflect it.

ZPT-JS and ZPT: similar but not equal

ZPT-JS is based on ZPT but it does not implement it at 100%.

Using ZPT we have:

the ZPT template (a HTML file with the ZPT tags inside)
the data
the final HTML file (the ZPT template combined with the data)

Using ZPT-JS:

the ZPT template (a HTML file with the ZPT tags inside)
the data
the final HTML file is the ZPT template! The DOM of the HTML page is modified depending on the tags in the ZPT template.

A main goal of ZPT-JS is not to break a valid HTML document. So, as HTML5 allows, instead of using TAL attributes ZPT-JS uses data attributes. This way tal:content attribute is replaced by data-content. However, ZPT-JS also supports standard TAL attributes (setting a configuration option).

Usage

Let's see ZPT in action. You can use ZPT this way:

A sample of template:

<!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>

Where gettingStarted.js contains:

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

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

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

The resulting body element is:

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

If we want to update the message:

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>

For more details check getting started page.