Zpt NPM | npm.io

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, query, 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 and ZPT: similar but not equal

ZPT-JS is based on ZPT but it does not implement it at 100%: there are some important differences between ZPT-JS and ZPT.

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 (invoking zpt.context.useOriginalTags()).

Installation

ZPT-JS is registered as a package on npm. This is the recomended way of downloading it. You can install the latest version of ZPT-JS and its dependencies with the npm CLI command:

npm install zpt

Usage

A sample of template:

gettingStarted.html

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

            <script src="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>

Where zpt.min.js is the minimized version of ZPT-JS and gettingStarted.js is:

gettingStarted.js

    "use strict";

    var dictionary = new zpt.ReactiveDictionary({
        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 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>

Please, take a look at the ZPT-JS web for more information about ZPT-JS.

License

LGPL

template templates templating python zpt zope page

loadjs messageformat log4javascript

@infinitebrahmanuniverse/nolb-zp @everything-registry/sub-chunk-3240

3 years ago

3 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

8 years ago

8 years ago

8 years ago