zpt
Version:
Zenon Page Templates - JS (ZPT-JS)
151 lines (135 loc) • 6.19 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8">
<title>ZPT-JS</title>
<script type="module" src="js/zpt.js"></script>
<script type="text/javascript" src="lib/syntaxHighlighter/lib.js"></script>
<link rel="stylesheet" type="text/css" href="docs.css">
<link rel="stylesheet" type="text/css" href="lib/syntaxHighlighter/theme.css">
</head>
<body>
<div data-use-macro="'page@templates.html'">
<div data-fill-slot="'page-header'">
<h1>Zenon Page Templates - JS (ZPT-JS)</h1>
<p class="subheader">
A javascript implementation of <strong>Zope Page Templates (ZPT)</strong>.
</p>
<p class="linkButton">
<a href="tutorial/gettingStarted.html" title="A quick start guide for ZPT-JS">Getting started</a>
</p>
</div>
<article data-fill-slot="'article'">
<h2>What is ZPT-JS</h2>
<p>
<strong>Zenon Page Templates - JS (ZPT-JS)</strong> is a <em>Javascript API</em> that makes it easy to modify the DOM of a HTML document with no Javascript programming, using only some custom attributes. <strong>ZPT-JS</strong> is a javascript implementation of Zope Page Templates (ZPT). It is not a fully compliant implementation: there are some differences. Take a look at <a href="https://zope.readthedocs.io/en/latest/zopebook/index.html">Zope2 book</a> to learn about <em>Zope Page Templates</em>.
</p>
<p>
Core features of <strong>ZPT-JS</strong> are:
</p>
<ul>
<li>Easy to learn; clean, simple and consistent syntax.</li>
<li>A rich and powerful group of expressions available (string, Jquery, logical, math, arrays, lists, ranges, function, method expressions...).</li>
<li>Don't break HTML! The HTML documents using ZPT-JS are valid HTML documents.</li>
<li>Makes it easy to designers maintain pages without having to abandon their tools.</li>
<li>Internal macro support; external asynchronous macro loading support.</li>
<li>I18n and L10n support using standards <a href="https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Intl">Intl</a> and <a href="http://userguide.icu-project.org/formatparse/messages">ICU</a>. External asynchronous i18n files loading support.</li>
<li>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.</li>
</ul>
<h2>ZPT-JS and ZPT: similar but not equal</h2>
<p>
ZPT-JS is based on ZPT but it does not implement it at 100%.
</p>
<p>
Using ZPT we have:
</p>
<ul>
<li>the ZPT template (a HTML file with the ZPT tags inside)</li>
<li>the data</li>
<li>the final HTML file (the ZPT template combined with the data)</li>
</ul>
<p>
Using ZPT-JS:
</p>
<ul>
<li>the ZPT template (a HTML file with the ZPT tags inside)</li>
<li>the data</li>
<li>the final HTML file is the ZPT template! The DOM of the HTML page is modified depending on the tags in the ZPT template.</li>
</ul>
<p>
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 <em>tal:content</em> attribute is replaced by <em>data-content</em>. However, ZPT-JS also supports standard TAL attributes (setting a configuration option).
</p>
<h2>Usage</h2>
<p>
Let's see ZPT in action. You can use ZPT this way:
</p>
<p>
A sample of template:
</p>
<pre class="brush: html">
<!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>
</pre>
<p>
Where <code>gettingStarted.js</code> contains:
</p>
<pre class="brush: js">
import { zpt } from './zpt-esm.js';
var dictionary = {
message: "Hello, world!"
};
zpt.run({
root: document.body,
dictionary: dictionary
});
</pre>
<p>
The resulting <code>body</code> element is:
</p>
<pre class="brush: html">
<body>
<p data-content="message">
Hello, world!
</p>
</body>
</pre>
<p>
If we want to update the <em>message</em>:
</p>
<pre class="brush: js">
dictionary.message = "Bye, world!";
zpt.run({
command: 'partialRender',
target: [
document.body
]
});
</pre>
<p>
The <code>body</code> element now is:
</p>
<pre class="brush: html">
<body>
<p data-content="message">
Bye, world!
</p>
</body>
</pre>
<p>
For more details check <a href="tutorial/gettingStarted.html">getting started page</a>.
</p>
</article>
</div>
</body>
</html>