zpt
Version:
Zenon Page Templates - JS (ZPT-JS)
139 lines (125 loc) • 6.13 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8">
<title>ZPT-JS</title>
<script type="text/javascript" src="lib/zpt.min.js" defer></script>
<script type="text/javascript" src="js/zpt.js" defer></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>
A sample of template:
</p>
<pre class="brush: 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>
</pre>
<p>
Where <code>zpt.min.js</code> is the minimized version of ZPT-JS and <code>gettingStarted.js</code> is:
</p>
<pre class="brush: js">
"use strict";
var dictionary = new zpt.ReactiveDictionary({
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 change some data in the dictionary this way:
</p>
<pre class="brush: js">
dictionary.message = "Bye, world!";
</pre>
<p>
We don't need to do anything else, the <code>body</code> element now is:
</p>
<pre class="brush: html">
<body>
<p data-content="message">
Bye, world!
</p>
</body>
</pre>
</article>
</div>
</body>
</html>