zpt
Version:
Zenon Page Templates - JS (ZPT-JS)
108 lines (95 loc) • 4.13 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8">
<title>ZPT-JS reference - Configuration - dictionary</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>ZPT-JS reference - Configuration - dictionary</h1>
<ul>
<li><a href="#syntax">Syntax</a>.</li>
<li><a href="#description">Description</a>.</li>
<li><a href="#examples">Examples</a>.</li>
</ul>
</div>
<article data-fill-slot="'article'">
<h2 data-attributes="id 'syntax'">Syntax</h2>
<pre class="syntax">
dictionary ::= a javascript object
</pre>
<h2 data-attributes="id 'description'">Description</h2>
<p>
The <code>dictionary</code> is used to define global variables; all the variables that you define using the <em>dictionary</em> are available in all the template. It is a javascript object.
</p>
<p>
Declaring a <em>dictionary</em> is not mandatory, but in practice we always declare it.
</p>
<p>
A <em>dictionary</em> usually is declared once. You declare at the first invokation of ZPT-JS and ZPT-JS will use the same dictionary the rest of the invokations. A full replace of the dictionary is supported, although is not normal.
</p>
<p>
A <em>dictionary</em> can be modified by the programmer. Changes will be effective in the template after doing a partial or a full render.
</p>
<p>
ZPT-JS provides <code>zpt.ReactiveDictionary</code>, a javascript class that defines a dictionary with reactive capabilities: it can detect some type of modifications done to it and invoke an update command. For more details about <em>reactive dictionaries</em> go to <a href="reactiveDictionaries.html">reference page</a>.
</p>
<h2 data-attributes="id 'examples'">Examples</h2>
<p>
An example of <em>fullRender</em>:
</p>
<pre class="brush: js; highlight: [3]">
import { zpt } from './zpt-esm.js';
var dictionary = {
aString: "string",
doggy: false,
number: 23,
user: {
name: "Bob",
age: function( ){
return 25;
}
},
items: [ "item0", "item1", "item2" ]
};
// Parse template
zpt.run({
root: document.body,
dictionary: dictionary
});
</pre>
<p>
If we invoke ZPT-JS a second time we must not declare the dictionary again. The next code do a full render using the same <em>dictionary</em>:
</p>
<pre class="brush: js; highlight: [5]">
zpt.run();
</pre>
<p>
You can update the <em>dictionary</em> and do a full render:
</p>
<pre class="brush: js; highlight: [5]">
dictionary.number = 100;
zpt.run();
</pre>
<p>
..or you can update the <em>dictionary</em> and do a partial render:
</p>
<pre class="brush: js">
dictionary.number = 100;
zpt.run({
command: 'partialRender',
target: [
document.getElementById( 'id1' ),
document.getElementById( 'id2' )
]
});
</pre>
</article>
</div>
</body>
</html>