zpt

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Variables and scope</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 tutorial - Variables and scope</h1> <ul> <li><a href="#directory">The directory</a>.</li> <li><a href="#defining">Defining variables</a>.</li> <li><a href="#redefining">Redefining variables</a>.</li> <li><a href="#global">Global variables</a>.</li> <li><a href="#nocall">Nocall variables</a>.</li> <li><a href="#variables">Built-in variables</a>.</li> </ul> </div> <article data-fill-slot="'article'"> <h2 data-attributes="id 'directory'">The directory</h2> <p> Take a look again to the dictionary: </p> <strong>sample.js</strong> <pre class="brush: js"> import { zpt } from './zpt-esm.js'; var dictionary = { msg: "hello world!" }; zpt.run({ root: document.body, dictionary: dictionary }); </pre> <p> In this example we define a variable called <em>msg</em> in the dictionary. The scope of all the variables in the dictionary is global: this means it will be accesible by any ZPT-JS attribute in the template. </p> <h2 data-attributes="id 'defining'">Defining variables</h2> <p> Take a look again to this template: </p> <strong>sample.html</strong> <pre class="brush: html"> <html> <body> <p id="p1"> ... </p> <p id="p2" data-define="var 1"> ... </p> <p id="p3"> ... </p> </body> </html> </pre> <p> The <em>msg</em> variable is accesible in the entire document, but the <em>var</em> one is only inside <em>p2</em>: Inside <em>p1</em> (not defined yet) or <em>p3</em> (out of scope) it is not accesible. </p> <h2 data-attributes="id 'redefining'">Redefining variables</h2> <p> Now we are going to define the same variable twice. Take a look again to this template: </p> <strong>sample.html</strong> <pre class="brush: html"> <html> <body> <div data-define="var 1"> var = <span data-content="var">must be 1</span> <div data-define="var 2"> var = <span data-content="var">must be 2</span> </div> var = <span data-content="var">must be 1</span> </div> </body> </html> </pre> <p> Here the <em>var</em> variable is evaluated 3 times. What value will result? </p> <ol> <li>Must be 1. The variable is defined just in the parent node with the value <em>1</em>.</li> <li>Must be 2. The variable is redefined just in the parent node with the value <em>2</em>.</li> <li>Must be 1. The redefinition is out of scope and the value is <em>1</em> again.</li> </ol> <h2 data-attributes="id 'global'">Global variables</h2> <p> Sometimes is useful to define global variables in a template. How? </p> <strong>sample.html</strong> <pre class="brush: html"> <html> <body> <p id="p1"> ... </p> <p id="p2" data-define="global var 1"> ... </p> <p id="p3"> ... </p> </body> </html> </pre> <p> The <em>var</em> variable is accesible after its declaration in <em>p2</em> (accesible inside <em>p2</em> and <em>p3</em>): Inside <em>p1</em> (not defined yet) it is not accesible. </p> <h2 data-attributes="id 'nocall'">Nocall variables</h2> <p> When ZPT-JS finds a <em>data-define</em> attribute it defines the variable and set its value with the evaluated value. After that, every time the variable appears ZPT-JS will evaluate it with that value, always the same value. </p> <p> But sometimes we need the expression is reevaluated every time a variable appears. How? </p> <strong>sample.html</strong> <pre class="brush: html"> <html> <body> <p data-define="nocall run counter()"> <span data-content="run">must be 1</span> <span data-content="run">must be 2</span> <span data-content="run">must be 3</span> </p> </body> </html> </pre> <p> Suppose <em>counter()</em> function returns an increased value starting with <em>1</em>. Then every time <em>run</em> value is required <em>counter()</em> function will be executed. </p> <h2 data-attributes="id 'variables'">Built-in variables</h2> <p> So a variable is either a in dictionary variable (built-in or defined by the user), or defined via a <code>data-define</code> attribute. The following variables are built-in: </p> <ul> <li><code>context</code>. An object with some utility methods. For internal use and for customization. See <a href="../reference/context.html">context reference page</a> for details.</li> <li><code>window</code>. The window object.</li> </ul> <p> As ZPT-JS register the <em>window</em> object automatically, so global variables defined via javascript can be used easily: </p> <pre class="brush: html"> <div data-content="window/globalVar">a string</div> </pre> </article> </div> </body> </html>