zpt
Version:
Zenon Page Templates - JS (ZPT-JS)
196 lines (173 loc) • 6.84 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8">
<title>Getting started</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>ZPT-JS tutorial - Getting started</h1>
<ul>
<li><a href="#downloading">Downloading ZPT-JS and its dependencies</a>.</li>
<li><a href="#header">Configuring the HTML header</a>.</li>
<li><a href="#template">Write the template</a>.</li>
<li><a href="#dictionary">Build the dictionary</a>.</li>
<li><a href="#invoke">Invoke ZPT-JS</a>.</li>
<li><a href="#result">The result</a>.</li>
<li><a href="#updates">Updates</a>.</li>
<li><a href="#node">Using ZPT-JS and node.js</a>.</li>
</ul>
</div>
<article data-fill-slot="'article'">
<h2 data-attributes="id 'downloading'">Downloading ZPT-JS and its dependencies</h2>
<p>
Go to <a href="../download.html">Download</a> section and follow the instructions to download ZPT-JS and its dependencies.
</p>
<h2 data-attributes="id 'header'">Configuring the HTML header</h2>
<p>
You must add to your web page the javascript code of ZPT-JS and its dependencies(<em>zpt.min.js</em>). Don't forget to add the reference of the javascript file with the invokation to ZPT-JS (for example <em>gettingStarted.js</em>):
</p>
<pre class="brush: html">
<head>
...
<script src="zpt.min.js" type="text/javascript" defer></script>
<script src="gettingStarted.js" type="text/javascript" defer></script>
...
</head>
</pre>
<h2 data-attributes="id 'template'">Write the template</h2>
<p>
Customize the body of your HTML document with some of the provided by ZPT-JS statements. One of these is <em>data-content</em>:
</p>
<pre class="brush: html">
<body>
<p data-content="message">
the message
</p>
</body>
</pre>
<p>
The resulting HTML document is:
</p>
<pre class="brush: html">
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Getting started</title>
<script src="/zpt/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>
<h2 data-attributes="id 'dictionary'">Build the dictionary</h2>
<p>
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, but ZPT provides an specific type that supports a reactive behaviour:
</p>
<pre class="brush: js">
var dictionary = new zpt.ReactiveDictionary({
message: "Hello, world!"
});
</pre>
<h2 data-attributes="id 'invoke'">Invoke ZPT-JS</h2>
<p>
Invoke the <code>run</code> method of ZPT:
</p>
<pre class="brush: js">
var zpt = require( 'zpt' );
...
zpt.run({
root: document.body,
dictionary: dictionary
});
</pre>
<p>
The resulting Javascript file (<em>gettingStarted.js</em>) is:
</p>
<pre class="brush: js">
"use strict";
var zpt = require( 'zpt' );
var dictionary = new zpt.ReactiveDictionary({
message: "Hello, world!"
});
zpt.run({
root: document.body,
dictionary: dictionary
});
</pre>
<p>
That's all!
</p>
<h2 data-attributes="id 'result'">The result</h2>
<p>
The resulting <code>body</code> element is:
</p>
<pre class="brush: html">
<body>
<p data-content="message">
Hello, world!
</p>
</body>
</pre>
<h2 data-attributes="id 'updating'">Updates</h2>
<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>
<p>
The <em>data-content</em> attribute is ignored by browsers: all the <em>data-*</em> attributes are completely ignored by the user agent.
</p>
<h2 data-attributes="id 'node'">Using ZPT-JS and node.js</h2>
<p>
That's OK. But... how can we use ZPT-JS at the server side (using <a href="https://nodejs.org/">node.js</a>)? <a href="https://www.npmjs.com/package/jsdom">jsdom</a> is needed when no browser is available:
</p>
<pre class="brush: js">
"use strict";
var jsdom = require( 'jsdom' );
var { JSDOM } = jsdom;
// Build JSDOM instance
var dom = new JSDOM(
'<!doctype html>'
+ '<html>'
+ '<body><h1 data-content="'hello, world!'">a text</h1></body>'
+ '</html>'
);
// Init some important vars
var window = dom.window;
var document = window.document;
global.window = window;
// Parse template
var zpt = require( 'zpt' );
zpt.run({
root: document.body,
dictionary: {}
});
console.log( 'Done!' );
</pre>
</article>
</div>
</body>
</html>